Chip
Compact elements for labels, tags, statuses, and removable items. Supports filled and outlined styles with five color options.
Playground
Label
Label
variant
color
size
rounded
<Chip>
Label
</Chip>Colors
Five color options available.
PrimarySecondarySuccessWarningDanger
Outlined Variant
Outlined chips have a transparent background.
PrimarySecondarySuccessWarningDanger
Sizes
Three sizes: sm, md, lg.
SmallMediumLarge
Closable
Add onClose to show a remove button. Click × to remove a chip below.
ReactTypeScriptNext.jsTailwind
Clickable
Pass onClick to render as a button.
API
| Property | Type | Default | Description |
|---|---|---|---|
variant | "filled" | "outlined" | "filled" | Visual fill style |
color | "primary" | "secondary" | "danger" | "warning" | "success" | "primary" | Color theme |
size | "sm" | "md" | "lg" | "md" | Size preset |
onClose | (e: MouseEvent) => void | — | Show a remove button and call this handler when clicked |
onClick | (e: MouseEvent) => void | — | Make the chip clickable (renders as <button>) |