Chip
A small, colorful text element that can represent a tag, filter, or badge.
Color
To set the color of a Chip, add one of the following classes:
brand(default)redorangeyellowgreentealbluepurplemagentagrayblackwhite
<div class="chip">Brand</div>
<div class="red chip">Red</div>
<div class="orange chip">Orange</div>
<div class="yellow chip">Yellow</div>
<div class="green chip">Green</div>
<div class="teal chip">Teal</div>
<div class="blue chip">Blue</div>
<div class="purple chip">Purple</div>
<div class="magenta chip">Magenta</div>
<div class="gray chip">Gray</div>
<div class="black chip">Black</div>
<div class="white chip">White</div>Subtle Color Scheme
Chips also support a subtle color scheme that uses a lighter background and darker text.
To use the subtle color scheme, add the subtle class in addition to the color class.
Note that the black and white color classes do not have subtle versions, so this class
has no effect when used with those colors.
<div class="chip subtle">Brand</div>
<div class="red chip subtle">Red</div>
<div class="orange chip subtle">Orange</div>
<div class="yellow chip subtle">Yellow</div>
<div class="green chip subtle">Green</div>
<div class="teal chip subtle">Teal</div>
<div class="blue chip subtle">Blue</div>
<div class="purple chip subtle">Purple</div>
<div class="magenta chip subtle">Magenta</div>
<div class="gray chip subtle">Gray</div>Clickable
To make a Chip clickable, add the clickable class. In this case, it's also a good idea to use a button element for the Chip itself.
<button class="clickable chip">Brand</button>
<button class="clickable red chip">Red</button>
<button class="clickable orange chip">Orange</button>
<button class="clickable yellow chip">Yellow</button>
<button class="clickable green chip">Green</button>
<button class="clickable teal chip">Teal</button>
<button class="clickable blue chip">Blue</button>
<button class="clickable purple chip">Purple</button>
<button class="clickable magenta chip">Magenta</button>
<button class="clickable gray chip">Gray</button>
<button class="clickable black chip">Black</button>
<button class="clickable white chip">White</button>
<button class="clickable chip subtle">Brand</button>
<button class="clickable red chip subtle">Red</button>
<button class="clickable orange chip subtle">Orange</button>
<button class="clickable yellow chip subtle">Yellow</button>
<button class="clickable green chip subtle">Green</button>
<button class="clickable teal chip subtle">Teal</button>
<button class="clickable blue chip subtle">Blue</button>
<button class="clickable purple chip subtle">Purple</button>
<button class="clickable magenta chip subtle">
Magenta
</button>
<button class="clickable gray chip subtle">Gray</button>Links as Clickable Chips
Clickable Chips can be links instead of buttons.
<a href="#" class="clickable chip">Clickable link</a>Deletable
To make a Chip deletable, add a button element inside the Chip with the class chip-delete.
<div class="chip">
Brand
<button class="chip-delete" title="Delete"></button>
</div>
<div class="red chip">
Red
<button class="chip-delete" title="Delete"></button>
</div>
<div class="orange chip">
Orange
<button class="chip-delete" title="Delete"></button>
</div>
<div class="yellow chip">
Yellow
<button class="chip-delete" title="Delete"></button>
</div>
<div class="green chip">
Green
<button class="chip-delete" title="Delete"></button>
</div>
<div class="teal chip">
Teal
<button class="chip-delete" title="Delete"></button>
</div>
<div class="blue chip">
Blue
<button class="chip-delete" title="Delete"></button>
</div>
<div class="purple chip">
Purple
<button class="chip-delete" title="Delete"></button>
</div>
<div class="magenta chip">
Magenta
<button class="chip-delete" title="Delete"></button>
</div>
<div class="gray chip">
Gray
<button class="chip-delete" title="Delete"></button>
</div>
<div class="black chip">
Black
<button class="chip-delete" title="Delete"></button>
</div>
<div class="white chip">
White
<button class="chip-delete" title="Delete"></button>
</div>
<div class="chip subtle">
Brand
<button class="chip-delete" title="Delete"></button>
</div>
<div class="red chip subtle">
Red
<button class="chip-delete" title="Delete"></button>
</div>
<div class="orange chip subtle">
Orange
<button class="chip-delete" title="Delete"></button>
</div>
<div class="yellow chip subtle">
Yellow
<button class="chip-delete" title="Delete"></button>
</div>
<div class="green chip subtle">
Green
<button class="chip-delete" title="Delete"></button>
</div>
<div class="teal chip subtle">
Teal
<button class="chip-delete" title="Delete"></button>
</div>
<div class="blue chip subtle">
Blue
<button class="chip-delete" title="Delete"></button>
</div>
<div class="purple chip subtle">
Purple
<button class="chip-delete" title="Delete"></button>
</div>
<div class="magenta chip subtle">
Magenta
<button class="chip-delete" title="Delete"></button>
</div>
<div class="gray chip subtle">
Gray
<button class="chip-delete" title="Delete"></button>
</div>Clickable & Deletable
To make a Chip both clickable and deletable, you'll need to make some adjustments to the markup to avoid nesting buttons inside other buttons, which is an accessibility problem.
To make a Chip both clickable and deletable, use a div with the clickable class
for the Chip itself. Inside, place the label text inside a button element with the
chip-label class, followed by the same delete button markup as in the example above.
These two buttons must be next to each other in the markup, not nested.
Attach your onclick handlers to the two inner buttons, not the outer div.
<div class="chip clickable">
<button
onclick="alert('Chip clicked')"
class="chip-label"
>
Chip text goes here
</button>
<button
onclick="alert('Delete clicked')"
class="chip-delete"
title="Delete"
></button>
</div>Clickable & Deletable Link
Below is an example of a Chip that is both clickable and deletable, using a link for the clickable part instead of a button.
The same rules apply as in the previous example: since links count as interactive elements, they
shouldn't contain buttons, so we use the chip-label element as our link.
<div class="chip clickable">
<a href="#" class="chip-label">Chip text goes here</a>
<button
onclick="alert('Delete clicked')"
class="chip-delete"
title="Delete"
></button>
</div>A Note on the Chip Label
Wrapping the content of a Chip in an element with the chip-label class is required
for Chips that are both clickable and deletable, and optional in all other cases.
Below are some examples of Chips with and without the chip-label class. They should
look and function identically.
<div class="chip blue">
<span class="chip-label"
>Standard chip with chip-label</span
>
</div>
<div class="chip blue">
Standard chip without chip-label
</div>
<div class="chip clickable green">
<button class="chip-label">
Clickable chip with chip-label
</button>
</div>
<button class="chip clickable green">
Clickable chip without chip-label
</button>
<div class="chip orange">
<span class="chip-label"
>Deletable chip with chip-label</span
>
<button class="chip-delete" title="Delete"></button>
</div>
<div class="chip orange">
Deletable chip without chip-label
<button class="chip-delete" title="Delete"></button>
</div>