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)redorangeyellowgreenskybluepurplemagentagrayblackwhite
Brand
Red
Orange
Yellow
Green
Sky
Blue
Purple
Magenta
Gray
Black
White
<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="sky chip">Sky</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>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 sky chip">Sky</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>Deletable
To make a Chip deletable, add a button element inside the Chip with the class chip-delete.
Brand
Red
Orange
Yellow
Green
Sky
Blue
Purple
Magenta
Gray
Black
White
<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="sky chip">
Sky
<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>