Chip
Selectable React chip for filter bars, multi-select lists, and removable tokens, with variants, icons, and a rounded style. Exposes aria-pressed.
Chip is a toggle button for filter bars and multi-select lists. For a static label use Tag instead.
When to use
Use Chip when a set of options must stay visible and toggle on tap. Typical places: filters above a list, categories on a search page, or selected values that can be removed. Use Tag for a static label with no interaction.
Keep chips to one line and order them by frequency of use.
Examples
Props
Props declared by Chip. Native attributes of the underlying element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "neutral" | ||
size | "sm" | "md" | "lg" | ||
rounded | boolean | ||
onColor | boolean | ||
selected | boolean | Controlled selected state - drives aria-pressed and the filled treatment. | |
defaultSelected | boolean | Uncontrolled initial selected state. | |
onSelectedChange | (selected: boolean) => void | Called with the next selected value when the chip toggles. | |
leadingIcon | react.ReactNode | Leading icon (inherits the chip text colour; 14px, 18px at lg). | |
trailingIcon | react.ReactNode | Trailing icon. | |
asChild | boolean | Render as the child element (Radix Slot) - e.g. wrap a router link. |
Accessibility
Chip is a toggle button with aria-pressed, so its selected state is announced. Space and Enter toggle it, and disabled chips use aria-disabled so they stay in the reading order.
The selected state changes fill and border, not only color. A removable chip's close button has its own accessible name.