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 %}
HTML
<bolt-chip color="teal">Colored chip</bolt-chip>