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 ~neutral'>Chip</span>
<span class='chip ~positive'>Chip</span>
<span class='chip ~warning'>Chip</span>
<span class='chip ~critical'>Chip</span>
<span class='chip ~info'>Chip</span>
<span class='chip ~urge'>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.) Using Tailwind? Just add mb-1 to any chip that could have another chip wrap below it.

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>
Normal Priority
Category Category Category Category Category Category
Example code
<span class="chip ~neutral !normal mb-1">Category</span>

<span class="chip ~positive !normal mb-1">Category</span>

<span class="chip ~warning !normal mb-1">Category</span>

<span class="chip ~critical !normal mb-1">Category</span>

<span class="chip ~info !normal mb-1">Category</span>

<span class="chip ~urge !normal 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 mb-1'>Design</span> <span class='chip ~neutral mb-1'>Architecture</span> <span class='chip ~neutral mb-1'>New York</span> <span class='chip ~neutral mb-1'>Urbanism</span></p>

Customization

Name Type Default Description
--color-fill color sets background color
--color-content color sets text color

You can also customize this element by simply overriding any of its CSS attributes, listed here. Contextual variable defaults (e.g., --color-content) and global variables (e.g., --family-primary) are defined here.