Chip

An inline element for statuses, labels, categories, and more


  • Display

    Inline Flex

  • Selectors

    .chip
  • Source

    GitHub ↗

  • Features

    TonesPriorities

Chip Chip Chip Chip Chip Chip
<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
Category Category Category Category Category Category
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
Category Category Category Category Category Category
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>