Chips
Chips are small, interactive visual elements used to display information in a compact form. They often include text and optional icons, and may be clickable or removable.
Loading Code Block...Installation
Section titled “Installation”To get started, install Butterfly DS via aqua:
Loading Code Block...Loading Code Block...Chip with Icon
Section titled “Chip with Icon”
Loading Code Block...sm chip
md chip
lg chip
Loading Code Block...Colors
Section titled “Colors”primary
neutral
success
danger
warning
info
Loading Code Block...Variants
Section titled “Variants”default
outline
Loading Code Block...| Props | Default | Type | Description |
|---|---|---|---|
| size | md | 'sm' | 'md' | The size of the checkbox |
| color | primary | 'primary' | 'neutral' | 'success' | 'danger' | 'warning' | 'info' | The color of the chip |
| text | - | string | The text in the chip |
| showClose | false | boolean | Whether to show the close icon on the chip |
| type | default | 'default' | 'outline' | The visual style variant of the chip |
| icon | - | ReactNode | Icon to display in the chip |
| className | - | string | Custom CSS class for additional styling |