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 |
...