Actions
Chip
Compact, selectable and dismissible tags for filters, labels and multi-select values.
- Source
- src/components/ui/chip.tsx
- Figma
- Chip · variant (filled, outline) × selected (false, true).
Usage
Included in the GliaKit boilerplate. Import it where you need it:
tsx
import { Chip } from "@/components/ui/chip";When to use
- Filter bars where several options can be active at once.
- Showing values someone picked, with a quick way to remove each one.
- For read-only status (Active, Trial, Failed), use Badge instead.
Examples
Toggle filters
Wrap chips in buttons with aria-pressed to make multi-select filters.
With icon and dismiss
Pass onDismiss to show a remove button.
API reference
Chip
Extends native span attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "filled" | "outline" | "filled" | Visual style. |
| selected | boolean | false | Selected state: violet fill (filled) or violet border and text (outline). |
| icon | React.ReactNode | - | Leading element, such as a colored dot, avatar or icon. |
| onDismiss | () => void | - | Shows a trailing remove button and calls this when it is clicked. |
Accessibility
- The dismiss button has aria-label="Remove"; pass a more specific label through a wrapper if several chips share a view.
- For toggleable filter chips, wrap the chip in a <button> with aria-pressed reflecting the selected state.