Badge

A small inline status indicator helpful for unread counts, notifications, and more


  • Display

    Inline Flex

  • Selectors

    .badge
  • Source

    GitHub ↗

  • Features

    TonesPriorities

Badge Badge Badge Badge Badge Badge
<span class='badge ~neutral'>Badge</span>
<span class='badge ~positive'>Badge</span>
<span class='badge ~warning'>Badge</span>
<span class='badge ~critical'>Badge</span>
<span class='badge ~info'>Badge</span>
<span class='badge ~urge'>Badge</span>

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. (You can resize setting --badge-size.)

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>
Normal Priority
New New New New New New
Example code
<span class="badge ~neutral !normal">New</span>

<span class="badge ~positive !normal">New</span>

<span class="badge ~warning !normal">New</span>

<span class="badge ~critical !normal">New</span>

<span class="badge ~info !normal">New</span>

<span class="badge ~urge !normal">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>

Customization

Name Type Default Description
--color-fill color sets background color
--color-content color sets text color
--badge-size size 0.6em sets height

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.