Default
Active
Disabled
Chips
| Variable name | Default value | Description |
|---|---|---|
--jc-chips | flex-start | Justify content for the chips container. |
--b-chip | rgba(0, 0, 0, 0.6) | Background color for the individual chip. |
--c-chip | #fff | Text color for the individual chip. |
--b-chip-active | rgba(0, 0, 0, 0.8) | Background color for the active chip. |
--c-chip-active | #fff | Text color for the active chip. |
--fs-chip | .8rem | Font size for the individual chip. |
| CSS Class | Description |
|---|---|
chips | Container for chip items. Sets alignment, display, justify-content, flex-wrap, and gap. |
chip | Base class for an individual chip. Sets background, color, border-radius, cursor, font-size, outline, overflow, padding, text-decoration, user-select, position, text-align, and transition. |
chip::before | Before pseudo-element for chip class. Defines background color, content, inset, opacity, position, and transition. |
chip:hover::before | Hover effect for the chip class. Changes the opacity of the before pseudo-element. |
chip.active | Active state for the chip class. Adjusts the background and text color for active chips. |