Chip
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Default#
✦auto-tag: infra
Removable#
✦auto-tag: infra
Custom color#
Pass any CSS color via the color prop to swap the default neutral tint for a brand or category color. Invalid colors fall back to the default tint; in dev, a console.warn names the offending value.
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | ReactNode | — | Pill-style leading icon (typically a glyph or `@`/`#`). |
| onRemove | (() => void) | undefined | — | Optional remove handler. When provided, renders an inset close button. Mirrors the `Tag` API — pass `onRemove` and the X is rendered automatically. |
| density | enum | comfortable | `'comfortable'` (default) renders the desktop chip at 26px tall. `'touch'` swaps to a roomier 32px chip with larger text for mobile filter strips. |
| color | string | undefined | — | Arbitrary CSS color. When set, the default neutral tint is replaced with this color. |