Chip
A compact interactive element for tags, filters, and selection states.
Installation
pnpm dlx stera-ui@latest add chip
Variants
| Variant | Description |
|---|---|
subtle | Muted background, no border (default) |
outline | Bordered with a surface background |
solid | Strong inverse background |
Sizes
| Size | Description |
|---|---|
xs | Extra small (default) |
sm | Small |
md | Medium |
lg | Large |
With Icons
Use data-icon="inline-start" or data-icon="inline-end" on an icon to control spacing and alignment.
Active State
Use the active prop to visually mark a chip as selected.
API Reference
Built on Base UI's Button primitive — see the full API reference there. Renders as a <button> element.
| Prop | Type | Default |
|---|---|---|
variant | "subtle" | "outline" | "solid" | "subtle" |
size | "xs" | "sm" | "md" | "lg" | "xs" |
active | boolean | false |
disabled | boolean | false |