Skip to main content

Back to all patterns

Badge Status

ID: badge_status Category: status Required slots: label

Live example

Active Pending Failed

Overview

Compact status indicator (success, warning, error).

Read more

Compact status indicator (success, warning, error).

Tags: badge, status

When to use / When not to use

When to use

  • This pattern appears frequently in the status category and has reusable slot anatomy.

When not to use

  • Avoid this pattern when a simpler native element can meet the same user goal with less cognitive load.

Accessibility notes

  • Keyboard keys: .
  • ARIA attributes: aria-live.
  • Visible focus required: No.

Implementation 

<div class="dig-chip-row" aria-label="Status badge examples">
  <x-ui.badge-status status="active" />
  <x-ui.badge-status status="pending" />
  <x-ui.badge-status status="failed" />
</div>