Badge

A small visual indicator for status, labels, or counts. Built on a <span> element with variant styling via data-variant. No JavaScript required.

Component Skill — components/badge/component-skill.md

Native basis

<span> element. No interactivity required — pure visual indicator.

Web Platform APIs

<span>

Classes

.badge

Variants (data-variant)

outlineColor variation secondaryAlternate background styling defaultAlternate background styling

Default

High emphasis with primary background.

New 3 unread Pro

<span class="badge" data-variant="default">New</span>

Secondary

Medium emphasis with secondary background.

Draft Pending Review

<span class="badge" data-variant="secondary">Draft</span>

Outline

Low emphasis with border only.

v0.1.0 Beta Optional

<span class="badge" data-variant="outline">v0.1.0</span>

All Variants

Side-by-side comparison.

Default Secondary Outline

<span class="badge" data-variant="default">Default</span>
<span class="badge" data-variant="secondary">Secondary</span>
<span class="badge" data-variant="outline">Outline</span>

Decorative

If a badge is purely visual, hide it from screen readers with aria-hidden.

Notifications

<span class="badge" data-variant="default"
      aria-hidden="true">5</span>

On a Button

Badge inside a .btn for notification counts.

<button class="btn" data-variant="outline">
  Inbox
  <span class="badge" data-variant="default">3</span>
</button>

In a Card

Badge in a .card header for status display.

API Usage

Current billing period

Active

12,489

requests this month

CSS view file

/* -- Badge component ------------------------------------------- */

@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.5rem;

    &[data-variant="outline"] {
      border: 1px solid var(--border);
      color: var(--muted-foreground);
    }

    &[data-variant="secondary"] {
      background: var(--secondary);
      color: var(--secondary-foreground);
    }

    &[data-variant="default"] {
      background: var(--primary);
      color: var(--primary-foreground);
    }
  }
}