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.
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.
Chips have full tone and priority support.
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
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).
||color||—||sets background color|
||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
--family-primary) are defined here.