Skip to main content
GitHub stars

Badge

Badges show a status, count, or label.

Considerations

If badges contain just a number or text that requires extra context, you should provide that context with a visually-hidden element. For example, a badge on a mail icon displaying "12" should read 12 <span class="u-hide-visually">unread messages</span> so that assistive tech understands the intent. Or to be even more clear, include the label visible inside the badge: 12 unread messages

Badge text is often atomic and text wrapping to a new line is not ideal. Test your use case and consider preventing line breaks (use the badge--no-break class).

Examples

Various Badges

<span class="badge badge--primary">Archived</span>

<span class="badge badge--accent"
  >12 <span class="u-hide-visually">notifications</span></span
>
<a href="#" class="badge badge--accent"
  >12 <span class="u-hide-visually">notifications</span></a
>

<span class="badge badge--primary">
  Unread <span class="badge__count">322</span>
</span>

<a href="#" class="badge badge--primary">New!</a>

<div class="badge-group">
  <span class="badge badge--accent badge--no-break">
    <svg
      class="badge__icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
      role="img"
      aria-labelledby="tag1-icon-title"
    >
      <title id="tag1-icon-title">Tag</title>
      <path
        fill-rule="evenodd"
        d="M4.5 2A2.5 2.5 0 0 0 2 4.5v3.879a2.5 2.5 0 0 0 .732 1.767l7.5 7.5a2.5 2.5 0 0 0 3.536 0l3.878-3.878a2.5 2.5 0 0 0 0-3.536l-7.5-7.5A2.5 2.5 0 0 0 8.38 2H4.5ZM5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
        clip-rule="evenodd"
      />
    </svg>
    Color: red
  </span>

  <span class="badge badge--accent badge--no-break">
    <svg
      class="badge__icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
      role="img"
      aria-labelledby="tag2-icon-title"
    >
      <title id="tag2-icon-title">Tag</title>
      <path
        fill-rule="evenodd"
        d="M4.5 2A2.5 2.5 0 0 0 2 4.5v3.879a2.5 2.5 0 0 0 .732 1.767l7.5 7.5a2.5 2.5 0 0 0 3.536 0l3.878-3.878a2.5 2.5 0 0 0 0-3.536l-7.5-7.5A2.5 2.5 0 0 0 8.38 2H4.5ZM5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
        clip-rule="evenodd"
      />
    </svg>
    Sleeve-length: long
  </span>

  <span class="badge badge--accent badge--no-break">
    <svg
      class="badge__icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
      role="img"
      aria-labelledby="tag3-icon-title"
    >
      <title id="tag3-icon-title">Tag</title>
      <path
        fill-rule="evenodd"
        d="M4.5 2A2.5 2.5 0 0 0 2 4.5v3.879a2.5 2.5 0 0 0 .732 1.767l7.5 7.5a2.5 2.5 0 0 0 3.536 0l3.878-3.878a2.5 2.5 0 0 0 0-3.536l-7.5-7.5A2.5 2.5 0 0 0 8.38 2H4.5ZM5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
        clip-rule="evenodd"
      />
    </svg>
    Material: cotton
  </span>

  <span class="badge badge--accent badge--no-break">
    <svg
      class="badge__icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
      role="img"
      aria-labelledby="tag4-icon-title"
    >
      <title id="tag4-icon-title">Tag</title>
      <path
        fill-rule="evenodd"
        d="M4.5 2A2.5 2.5 0 0 0 2 4.5v3.879a2.5 2.5 0 0 0 .732 1.767l7.5 7.5a2.5 2.5 0 0 0 3.536 0l3.878-3.878a2.5 2.5 0 0 0 0-3.536l-7.5-7.5A2.5 2.5 0 0 0 8.38 2H4.5ZM5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
        clip-rule="evenodd"
      />
    </svg>
    Fit: wide
  </span>
</div>