Indicators and badges

Visual status indicators and categorization labels for showing state, type, or metadata at a glance.

Status indicators

Colored dots that communicate state. Use before text labels to show health, availability, or activity.

Code

<!-- Semantic variants -->
<span class="status-indicator">Default</span>
<span class="status-indicator status-indicator--success">Success</span>
<span class="status-indicator status-indicator--warning">Warning</span>
<span class="status-indicator status-indicator--error">Error</span>

<!-- Color variants -->
<span class="status-indicator status-indicator--green">Green</span>
<span class="status-indicator status-indicator--yellow">Yellow</span>
<span class="status-indicator status-indicator--orange">Orange</span>
<span class="status-indicator status-indicator--red">Red</span>
<span class="status-indicator status-indicator--blue">Blue</span>

<!-- Size variants -->
<span class="status-indicator status-indicator--small">Small</span>
<span class="status-indicator status-indicator--large">Large</span>

<!-- Without text (use role="img" + aria-label) -->
<span class="status-indicator status-indicator--success"
  role="img" aria-label="Online"></span>

Semantic variants

  • Default status
  • Success / Healthy
  • Warning / Needs attention
  • Error / Critical

Color variants

  • Green
  • Yellow
  • Orange
  • Red
  • Blue

Size variants

  • Small
  • Default
  • Large

Without text

Add aria-label for accessibility.

Badges

Inline labels for categorization, status, and metadata.

Code

<!-- Color variants -->
<span class="badge badge--blue">Blue</span>
<span class="badge badge--green">Green</span>
<span class="badge badge--orange">Orange</span>
<span class="badge badge--yellow">Yellow</span>
<span class="badge badge--red">Red</span>
<span class="badge badge--grey">Grey</span>

<!-- Status variants -->
<span class="badge badge--draft">Draft</span>
<span class="badge badge--pending">Pending</span>
<span class="badge badge--active">Active</span>
<span class="badge badge--archived">Archived</span>

<!-- Feedback variants -->
<span class="badge badge--success">Success</span>
<span class="badge badge--warning">Warning</span>
<span class="badge badge--error">Error</span>
<span class="badge badge--info">Info</span>

<!-- Size variants -->
<span class="badge badge--small">Small</span>
<span class="badge badge--large">Large</span>

Color variants

Blue Green Orange Yellow Red Grey

Status variants

Draft Pending Active Archived

Feedback variants

Success Warning Error Info

Size variants

Small Default Large

In context

  • Homepage redesign Active
  • New feature proposal Draft
  • Bug fix for login Pending review