Chip

A compact label for a tag, category, or attribute.

Design

import { Chip } from '@ontoui/react';

<Chip.Root>
  <Chip.Text>Design</Chip.Text>
</Chip.Root>;

Anatomy

Part	Element	Description
Chip.Root	<span>	The chip container. Carries the color and shape.
Chip.Icon	<span>	A decorative icon slot. Hidden from screen readers.
Chip.Text	<span>	The chip label. Truncates with an ellipsis.

Chip is presentational — it renders inline text and has no interaction or state. Wrap it in a Button.Root or a link if you need it to be actionable.

Examples

Colors

Use the color prop to convey status. Colors are decorative only — screen readers announce the label, not the tint, so keep the meaning in the text rather than in the color alone.

DraftPublishedExpiringFailed

<Chip.Root>
  <Chip.Text>Draft</Chip.Text>
</Chip.Root>
<Chip.Root color="success">
  <Chip.Text>Published</Chip.Text>
</Chip.Root>
<Chip.Root color="warning">
  <Chip.Text>Expiring</Chip.Text>
</Chip.Root>
<Chip.Root color="danger">
  <Chip.Text>Failed</Chip.Text>
</Chip.Root>

Icon

Add a Chip.Icon to place an icon next to the label. The icon renders wherever you put it, so place it before or after Chip.Text to get a leading or trailing icon. Any icon works — an inline SVG or a component from your icon library. It inherits the chip’s color through currentColor and is sized to the box, so icons drawn on a 24×24 viewBox need no extra styling.

PublishedPublished

<Chip.Root color="success">
  <Chip.Icon>
    <CheckIcon />
  </Chip.Icon>
  <Chip.Text>Published</Chip.Text>
</Chip.Root>
<Chip.Root color="success">
  <Chip.Text>Published</Chip.Text>
  <Chip.Icon>
    <CheckIcon />
  </Chip.Icon>
</Chip.Root>

Icon only

Omit Chip.Text for an icon-only chip — it renders as a square. The icon is hidden from screen readers and a plain <span> has no role of its own, so such a chip is invisible to assistive technology unless you name it: pass both role="img" and aria-label on Chip.Root.

<Chip.Root color="success" role="img" aria-label="Published">
  <Chip.Icon>
    <CheckIcon />
  </Chip.Icon>
</Chip.Root>

API Reference

Chip.Root

Prop	Type	Default
children?	ReactNode	—
id?	string	—
className?	string	—
color?	"default" | "success" | "warning" | "danger"	default
aria-label?	string	—
role?	string	—
ref?	Ref<HTMLSpanElement>	—

Chip.Icon

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLSpanElement>	—

Chip.Text

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLSpanElement>	—