Skip to content 
Chip text Chip text Chip text
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 |
Both background and text color can be customized using the --z-chip--bg and --z-chip--color CSS custom properties respectively.
Also, the hover state & active state can be customized using the --z-chip--bg--hover,--z-chip--color--hover and --z-chip--bg--active, --z-chip--color--active CSS custom properties respectively.
Finally, you can also customize the disabled state using the --z-chip--bg--disabled and --z-chip--color--disabled CSS custom properties respectively.