Chip
A compact element for tags, filters, or selections. Supports delete and click actions.
Variants
SolidSubtleOutline
Colors
PrimarySecondarySuccessDangerWarningInfo
Sizes
SmallMedium
Deletable
Deletable
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'solid' | 'subtle' | 'outline' | 'solid' | Visual fill weight |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'primary' | Color scheme |
size | 'sm' | 'md' | 'md' | Size of the chip |
onDelete | () => void | - | Callback when the delete icon is clicked; shows the delete button when provided |
onClick | () => void | - | Makes the chip clickable |
startIcon | ReactNode | - | Icon placed before the label |
children | ReactNode | - | Chip label content |
className | string | - | Additional CSS class |
style | CSSProperties | - | Inline styles |