StatusBadge

A semantic status label.

When to use it

• Showing the state of a record: active, pending, rejected.

When not to use it

• Decoration or counts. Use a plain badge.

Examples

Each example is a conformance case: every emitter — React, and each framework adapter — is checked against exactly this markup.

active

<span class="gov-status gov-status--success">Active</span>

{
  "status": "success",
  "children": "Active"
}

on-leave

<span class="gov-status gov-status--warning">On leave</span>

{
  "status": "warning",
  "children": "On leave"
}

rejected

<span class="gov-status gov-status--danger">Rejected</span>

{
  "status": "danger",
  "children": "Rejected"
}

under-review

<span class="gov-status gov-status--info">Under review</span>

{
  "status": "info",
  "children": "Under review"
}

inactive

<span class="gov-status gov-status--neutral">Inactive</span>

{
  "status": "neutral",
  "children": "Inactive"
}

Variants

Accessibility

Accessible name. The visible text label, which is required.

• Status is never conveyed by color alone (WCAG 1.4.1). The text label is the status; the color reinforces it.
• Tinted surface with dark text rather than a saturated fill with white text, which does not reach 4.5:1 for amber.

Class names

View the manifest for this component: packages/manifest/components/status-badge.json