Colored Chips
When appropriate, use the color prop to apply status or brand colors to a chip.
Important Notes:When color is null or set to auto, the default design has a semi-transparent background that works across all color themes; when color is set to a specific color, the chip will always render in that color.When using status chips, it is recommended to append an appropriate icon in front of the text.When using branded chips, always make sure a chip has good contrast with the page background. For example, do not use a navy colored chip against a navy background.
Demo
Status Colors
Error
Warning
Success
Selective Brand Colors
auto
navy
teal
orange
yellow
wine
pink
berry
violet
gray
Twig
{% include '@bolt-components-chip/chip.twig' with {
text: 'Colored chip',
color: 'teal',
} only %}