Actions

Chip

A pill-shaped control: filters, tags, toggles. Always focusable, which is the line between this and a Badge.

Toggling

Use selected with onSelectedChange. It becomes aria-pressed, and the stylesheet reads that attribute, so a chip cannot look selected while telling a screen reader it is not.

const [selected, setSelected] = useState<string[]>([]);

<Chip selected={selected.includes(name)} onClick={() => toggle(name)}>
  {name}
</Chip>

Removable

Use onRemove to add a dismiss control inside the chip.

{tags.map(tag => (
  <Chip key={tag} selected onRemove={() => remove(tag)}>
    {tag}
  </Chip>
))}

{/* when the last one goes */}
<Chip onClick={() => reset()}>Reset</Chip>

With onRemove the chip holds a second control. Removing a filter and toggling it are different actions, so they are different controls. Tab to a chip, then again to reach its dismiss button.

Size

Two heights, to sit beside small or medium controls.

<Chip size="s">Small</Chip>
<Chip size="m">Medium</Chip>
<Chip size="l">Large</Chip>
<Chip disabled>Disabled</Chip>

Props

Prop	Type	Default	Notes
`selected`	`boolean`	—	Becomes aria-pressed. Present makes this a toggle; absent leaves it a plain button.
`onRemove`	`(event) => void`	—	Adds a remove control with its own focus stop.
`size`	`'s' \| 'm' \| 'l'`	'm'
`disabled`	`boolean`	false