Chips

Added 3.8.0 Updated 5.10.0

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

Chip sizes

Regular Large

<span class="ch-chip">Regular</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>

Monospaced chips

Chassis360

A variant of our regular chips for use in enterprise systems. Set in sentence case with stronger contrast for increased legibility.

IBM Plex Mono

When using monospaced chips, add a link to IBM Plex Mono from Google Fonts within the <head> section of your page.
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
  rel="stylesheet"
/>

Sizes

Regular Small

Variants

Blue Teal Violet Magenta Green Bluegrey Red Orange Grey Black

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

<span class="ch-chip ch-chip--mono ch-chip--sm ch-chip--blue">Blue</span>
<span class="ch-chip ch-chip--mono ch-chip--sm ch-chip--teal">Teal</span>
<span class="ch-chip ch-chip--mono ch-chip--sm ch-chip--violet">Violet</span>
<span class="ch-chip ch-chip--mono ch-chip--sm ch-chip--magenta">Magenta</span>
<span class="ch-chip ch-chip--mono ch-chip--sm ch-chip--green">Green</span>
<span class="ch-chip ch-chip--mono ch-chip--sm ch-chip--bluegrey">Bluegrey</span>
<span class="ch-chip ch-chip--mono ch-chip--sm ch-chip--red">Red</span>
<span class="ch-chip ch-chip--mono ch-chip--sm ch-chip--orange">Orange</span>
<span class="ch-chip ch-chip--mono ch-chip--sm ch-chip--grey">Grey</span>
<span class="ch-chip ch-chip--mono ch-chip--sm ch-chip--black">Black</span>