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
iconLeft
iconRight
<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
With Icons
Use iconLeft or iconRight to render an icon name or any ReactNode.
New tagSavedNextRemove
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 |
iconLeft | ButtonIconName | ReactNode | Icon rendered before the label. Pass an icon name string or any ReactNode | |
iconRight | ButtonIconName | ReactNode | Icon rendered after the label. Pass an icon name string or any ReactNode | |
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>) |
