Chips

Supplementary labels that can be used to describe parts of your UI or show a status such as "new" or "complete".

Chip sizes

New Large

<span class="ch-chip">New</span> <span class="ch-chip ch-chip--lg">Large</span>

Chip variants

Yellow Blue Teal Violet Magenta Green Bluegrey Red Orange Grey 1 Grey 2 Grey 3 Grey 4 Grey 5 Grey 6 Grey 7

<span class="ch-chip ch-chip--yellow">Yellow</span>
<span class="ch-chip ch-chip--blue">Blue</span>
<span class="ch-chip ch-chip--teal">Teal</span>
<span class="ch-chip ch-chip--violet">Violet</span>
<span class="ch-chip ch-chip--magenta">Magenta</span>
<span class="ch-chip ch-chip--green">Green</span>
<span class="ch-chip ch-chip--bluegrey">Bluegrey</span>
<span class="ch-chip ch-chip--red">Red</span>
<span class="ch-chip ch-chip--orange">Orange</span>
<span class="ch-chip ch-chip--grey-1">Grey 1</span>
<span class="ch-chip ch-chip--grey-2">Grey 2</span>
<span class="ch-chip ch-chip--grey-3">Grey 3</span>
<span class="ch-chip ch-chip--grey-4">Grey 4</span>
<span class="ch-chip ch-chip--grey-5">Grey 5</span>
<span class="ch-chip ch-chip--grey-6">Grey 6</span>
<span class="ch-chip ch-chip--grey-7">Grey 7</span>

Chip outline variants

Blue Teal Violet Magenta Green Bluegrey Red Orange Grey 1 Grey 2 Grey 3

<span class="ch-chip ch-chip--outline ch-chip--blue">Blue</span>
<span class="ch-chip ch-chip--outline ch-chip--teal">Teal</span>
<span class="ch-chip ch-chip--outline ch-chip--violet">Violet</span>
<span class="ch-chip ch-chip--outline ch-chip--magenta">Magenta</span>
<span class="ch-chip ch-chip--outline ch-chip--green">Green</span>
<span class="ch-chip ch-chip--outline ch-chip--bluegrey">Bluegrey</span>
<span class="ch-chip ch-chip--outline ch-chip--red">Red</span>
<span class="ch-chip ch-chip--outline ch-chip--orange">Orange</span>
<span class="ch-chip ch-chip--outline ch-chip--grey-1">Grey 1</span>
<span class="ch-chip ch-chip--outline ch-chip--grey-2">Grey 2</span>
<span class="ch-chip ch-chip--outline ch-chip--grey-3">Grey 3</span>