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>