Skip to contentSkip to footer
Close-up of a badger in the wild

Photo: Cloudtail the Snow Leopard

Badge

Introduction

The badge component is a small inline label for surfacing tags, counts, statuses, or short categorical labels alongside other content.

Badge

Add .badge to any inline element. Without a theme class, the background is a subtle tint derived from the current text color.

DefaultPrimarySecondaryDark
HTML
<span class="badge">Default</span>
<span class="badge theme-primary">Primary</span>
<span class="badge theme-secondary">Secondary</span>
<span class="badge theme-dark">Dark</span>
Figure 1
Figure 1 notes
LinesDetails
1

Without a theme class, the badge background is a 10% color-mix tint of the current text color.

2-4

Add any theme-* class to apply a solid background color.

Badge with icon

Place an icon inside the badge. The padding and gap adjust automatically via :has() — no extra class needed.

AlertsAlertsAlerts
HTML
<span class="badge">
  <span class="icon icon-bell" aria-hidden="true"></span>
  Alerts
</span>
<span class="badge theme-primary">
  <span class="icon icon-bell" aria-hidden="true"></span>
  Alerts
</span>
<span class="badge theme-secondary">
  <span class="icon icon-bell" aria-hidden="true"></span>
  Alerts
</span>
Figure 2

Badge in context

Place a .badge inside an <a> or <button> to display a count or status inline. Wrap the link text in .text so hover and focus underline the label, not the badge.

HTML
<ul class="nav nav--divider">
  <li>
    <a href="#1">Home</a>
  </li>
  <li>
    <a href="#1">
      <span class="text">Inbox</span>
      <span class="badge theme-primary">4</span>
    </a>
  </li>
  <li>
    <a href="#1">
      <span class="text">Notifications</span>
      <span class="badge theme-secondary">12</span>
    </a>
  </li>
  <li>
    <a href="#1">Archive</a>
  </li>
</ul>
Figure 3

Button

Navigation