How to Use
Chip
Chip displays compact labels, tags, categories, or status indicators. It supports four visual variants (solid, soft, bordered, dot) and seven color roles. Chips are non-interactive by default — use them purely for visual labeling. They are ideal for status badges in tables, filter tags, skill labels on profile cards, and category indicators on content items.
Status Labels
Use Chip to communicate statuses like Active, Pending, Blocked, or Draft. The color prop maps to the status meaning — green (success) for active, amber (warning) for pending, red (danger) for blocked, and neutral (default) for draft. The variant prop controls visual weight: "solid" for high emphasis (table cells, alerts), "soft" for moderate emphasis (filter bars, cards), "bordered" for subtle (inline text), "dot" for minimal (compact lists).
<div className="flex flex-wrap gap-2">
<Chip color="success" variant="solid">Active</Chip>
<Chip color="warning" variant="soft">Pending</Chip>
<Chip color="danger" variant="bordered">Blocked</Chip>
<Chip color="default" variant="dot">Draft</Chip>
</div>Tags and Categories
Chips work well as filter tags on listing pages or category badges on content cards. Use color="primary" for selected/filtered tags and color="default" for unselected ones. Chips can be grouped with flex-wrap for responsive tag clouds that wrap to multiple lines on narrow screens.
<div className="flex flex-wrap gap-2">
<Chip color="primary" variant="soft">React</Chip>
<Chip color="primary" variant="soft">TypeScript</Chip>
<Chip color="secondary" variant="soft">Design</Chip>
<Chip color="info" variant="soft">API</Chip>
<Chip color="success" variant="soft">Testing</Chip>
</div>Accessibility
Chip renders as a <span> element — it is non-interactive and has no keyboard or focus semantics. Use Chip purely for visual labeling. If you need interactive tags (removable, clickable), wrap Chip content inside a Button or use a proper interactive component.
Props Reference
All available props for Chip. See the full API reference page for interactive playground examples.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "solid" | "soft" | "bordered" | "dot" | "solid" | Chip variant. |
| color | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "default" | Chip color. |
| size | "xs" | "xs-sm" | "sm" | "md" | "lg" | "xl" | "md" | Chip size. |
| radius | "none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full" | "full" | Border radius. |
| isDisabled | boolean | false | Reduce opacity. |
| startContent | ReactNode | — | Leading content (e.g., avatar). |
| endContent | ReactNode | — | Trailing content (e.g., close icon). |
Best Practices
- ◆variant="solid" for high-emphasis labels in tables and detail views; variant="soft" for moderate-emphasis in cards and filters
- ◆variant="bordered" works well for secondary tags that should not compete with primary content
- ◆variant="dot" shows a colored circle without background — ideal for minimal status indicators in tight spaces
- ◆Group related chips with flex-wrap for responsive tag layouts that adapt to container width
- ◆Chips are non-interactive — for removable tags, add a close button manually inside the chip or use a custom implementation