#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.

npm install @a3s-lab/ui@0.4.1

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

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#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

#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.