Overview

The badge is a small inline element ideal for data heavy interfaces. It’s useful for drawing attention to the elements near it – for example, as a “New” label or unread count.

Badges are nearly always pinned on another element (i.e., inline). If you’re thinking about using a badge on its own, consider a chip instead.

Considerations

Vertical alignment — Badges are vertically aligned with the middle of the text surrounding it. While normally this results in correct positioning, it can look odd when badges are followed by non-text elements.

Reduced text size — Badges are best preceded with text that is of size 1 rem. If they are used next to text of other sizes, the badge will look disproportional.

Medium font weight — To compensate for their reduced text size, badges by default have an increased text weight (medium) to aid readability.

Spacing — When using badges, be mindful of margins. In most cases, you’ll want an x-margin of at least 1rem. (Like all a17t elements, badges specify no margin themselves.)

Variants

Badges have full tone and priority support.

Low Priority

New New New New New New

Example code

<span class="badge ~neutral @low">New</span>

<span class="badge ~positive @low">New</span>

<span class="badge ~warning @low">New</span>

<span class="badge ~critical @low">New</span>

<span class="badge ~info @low">New</span>

<span class="badge ~urge @low">New</span>

High Priority

New New New New New New

Example code

<span class="badge ~neutral @high">New</span>

<span class="badge ~positive @high">New</span>

<span class="badge ~warning @high">New</span>

<span class="badge ~critical @high">New</span>

<span class="badge ~info @high">New</span>

<span class="badge ~urge @high">New</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

Unread 55

Example code

<p>Unread <span class='badge ~critical @high'>55</span></p>