<span class='chip ~gray'>Chip</span>
<span class='chip ~green'>Chip</span>
<span class='chip ~yellow'>Chip</span>
<span class='chip ~red'>Chip</span>
<span class='chip ~blue'>Chip</span>
<span class='chip ~purple'>Chip</span>Overview
A chip (also called a “tag” or “label”) is a helpful element for representing categorical data. For example, you might use a chip to display the status of an item, to list its features (as this documentation does), or to display tags.
Most chips will generally be only a word or two. For longer content, consider using a card instead.
Considerations
Margins — When using badges, be mindful of margins. In most cases, you’ll want an y-margin of at least 1rem to prevent visual overlap when wrapping. (Like all a17t elements, badges specify no margin themselves.)
Similarity to Buttons — Depending on your layout, chips can look a lot like buttons. Avoid using chips and buttons with the same priority near one another to prevent confusion over which elements are interactive.
Variants
Chips have full tone and priority support.
Low Priority
Example code
<span class="chip ~neutral @low mb-1">Category</span>
<span class="chip ~positive @low mb-1">Category</span>
<span class="chip ~warning @low mb-1">Category</span>
<span class="chip ~critical @low mb-1">Category</span>
<span class="chip ~info @low mb-1">Category</span>
<span class="chip ~urge @low mb-1">Category</span>High Priority
Example code
<span class="chip ~neutral @high mb-1">Category</span>
<span class="chip ~positive @high mb-1">Category</span>
<span class="chip ~warning @high mb-1">Category</span>
<span class="chip ~critical @high mb-1">Category</span>
<span class="chip ~info @high mb-1">Category</span>
<span class="chip ~urge @high mb-1">Category</span>Accessibility
Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a title attribute.
Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!
Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).
Examples
Categories
Design Architecture New York Urbanism
Example code
<p class="label mb-2">Categories</p>
<p><span class='chip ~neutral @high mb-1'>Design</span> <span class='chip ~neutral @high mb-1'>Architecture</span> <span class='chip ~neutral @high mb-1'>New York</span> <span class='chip ~neutral @high mb-1'>Urbanism</span></p>