Skip to content 
Chip
Chips are interactive elements consisting of a keyword or phrase that users can select among a series of given options. Chips allow adding information into a dropdown. Multiple chips can be selected at the same time and each can be dismissed individually.
UX/UI Guidelines
Check the design documentation of the component in ZeroHeight.
From Figma to code
...
Customization
INFO
Check everything about the customization mechanics in the "How it works" documentation.
| CSS Variable | Type | Description |
|---|---|---|
--z-chip--color | color | Foreground color |
--z-chip--color--hover | color | Foreground color on hover |
--z-chip--color--active | color | Foreground color on active |
--z-chip--color--disabled | color | Foreground color on disabled |
--z-chip--bg | color | Background color |
--z-chip--bg--hover | color | Background color on hover |
--z-chip--bg--active | color | Background color on active |
--z-chip--bg--disabled | color | Background color on disabled |
...