For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.3.0/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.3.0/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.3.0/en/components/status-badge.md.
A3S UI
  • English
  • v0.3.0

      • Status Badge

      Status Badge gives operational states a compact, consistent treatment without exposing backend-specific status names as a styling API. It is suited to Agent executions, builds, deployments, streams, and release lifecycle state.

      Live preview
      QueuedRunningCompletedRetryingFailed

      Usage

      Map domain statuses to the five semantic states in the host application.

      <span class="status-badge" data-state="active" data-indicator>Running</span>

      Parameters

      APIValuesPurpose
      class="status-badge"RequiredRoot status label
      data-stateneutral, active, success, warning, dangerSemantic state treatment
      data-sizesmMore compact geometry
      data-indicatorMarkerAdds a decorative state dot
      data-truncateMarkerTruncates a direct child <span> when bound
      --status-badge-toneCSS colorOptional product-specific semantic tone

      States and variants

      Use neutral for queued, unknown, or inactive state; active for live work; success for terminal success; warning for degraded or retrying work; and danger for failed, cancelled, or blocked work. Keep the user-facing label specific to the domain.

      <span class="status-badge" data-state="success">Published</span>
<span class="status-badge" data-state="warning">Cleanup pending</span>
<span class="status-badge" data-state="danger">Cancelled</span>

      Status Badge is distinct from Badge: use Badge for categories, counts, and immutable labels; use Status Badge for state that may change over time.

      Accessibility

      Always include visible state text so color and the optional indicator are redundant. Do not add role="status" to every badge; add a live-region role only when the host application must announce a state transition. When a status controls another region, keep that relationship and its loading or error semantics on the owning control or region.