Skip to main content
Use the .badge class to create inline labels, tags, or status indicators. Badges come with six built-in variants for different semantic purposes.

​
Variants

<span class="badge">Default</span>
<span class="badge secondary">Secondary</span>
<span class="badge outline">Outline</span>
<span class="badge success">Success</span>
<span class="badge warning">Warning</span>
<span class="badge danger">Danger</span>

​
Variant Styles

Default

Primary background with primary foreground color. Use for primary actions or default states.

Secondary

Secondary background with secondary foreground color. Use for secondary information or alternative states.

Outline

Transparent background with border. Use for neutral or less prominent badges.

Success

Green color scheme. Use for success states, active status, or positive indicators.

Warning

Yellow/orange color scheme. Use for warnings, pending states, or caution indicators.

Danger

Red color scheme. Use for errors, inactive status, or critical alerts.

​
With Icons

Badges have built-in gap spacing for icons or other inline elements: 
<span class="badge success">
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M20 6L9 17l-5-5"/>
  </svg>
  Active
</span>

<span class="badge danger">
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M18 6L6 18M6 6l12 12"/>
  </svg>
  Inactive
</span>

​
In Tables

Badges work great for status columns in tables: 
<div class="table">
  <table>
    <thead>
      <tr>
        <th>User</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice Johnson</td>
        <td><span class="badge success">Active</span></td>
      </tr>
      <tr>
        <td>Bob Smith</td>
        <td><span class="badge warning">Pending</span></td>
      </tr>
      <tr>
        <td>Carol White</td>
        <td><span class="badge danger">Inactive</span></td>
      </tr>
    </tbody>
  </table>
</div>

​
Styling Details

  • Display: inline-flex with centered alignment
  • Gap: var(--space-1) between children
  • Padding: var(--space-1) vertical, var(--space-4) horizontal
  • Border radius: fully rounded (var(--radius-full))
  • Font size: var(--text-8) (small)
  • Font weight: medium (var(--font-medium))
  • Line height: normal
  • Default: Uses --primary and --primary-foreground
  • Secondary: Uses --secondary and --secondary-foreground
  • Outline: Transparent background with --border border
  • Success/Warning/Danger: Uses color mixing with theme-aware transparency (10% in light mode, 30% in dark mode)

​
Theme Support

The success, warning, and danger variants automatically adjust their opacity based on light/dark mode:
  • Light mode: 10% color mix for subtle backgrounds
  • Dark mode: 30% color mix for better visibility
This ensures optimal contrast in both themes without manual color adjustments.

​
CSS Variables

  • --space-1, --space-4 - Spacing
  • --text-8 - Font size
  • --font-medium - Font weight
  • --radius-full - Border radius
  • --primary, --primary-foreground - Default colors
  • --secondary, --secondary-foreground - Secondary colors
  • --foreground, --border - Outline colors
  • --success, --warning, --danger - Semantic colors