Docs Components
Chipexperimental
A little pill for taxonomy values like genres, themes, and moods. Chips can carry a count, be selected (they flip to ink), be removable, or be deprecated — a deprecated chip wears caution colors and points at its replacement. In tight table cells, chips collapse into a “+2” overflow instead of wrapping.
Variants
counted flagTrailing tabular usage count (taxonomy browser tallies).
selected flagInverse ink fill — active filters.
removable flagTrailing × button with aria-label 'Remove {label}'.
deprecated flagCaution trio + ⚠ + 'old → replacement'. Marks taxonomy values banned for new content.
API
| Prop | Type | Description |
|---|---|---|
label required | string | The value text. |
count | number | Usage tally, rendered tabular. |
selected | boolean | Inverse fill for active filters. |
deprecated | boolean | Caution styling + warning glyph. |
replacement | string | Migration target shown after an arrow when deprecated. |
onRemove | function | Renders the remove button when present. |
ChipGroup | component | {values, max=2}: single-line cluster for dense contexts; overflow renders as a muted '+N' text count (NOT a chip — it is metadata about the cluster, not a value) with tooltip + aria-label listing the rest. |
Design specifications
- height
space-6 - padding-x
space-3 - radius
radius-full - font
type-body-sm - deprecated-colors
color-status-caution-wash / -edge / -text - selected-colors
color-bg-inverse / color-text-inverse
Guidelines
- shouldA deprecated chip SHOULD always show its replacement when one exists.
- must-notChips are values, not actions — an action belongs in a Button.
- mustChips inside table cells never wrap — use ChipGroup so rows keep one height and clusters read cleanly.