Components

Status

A compact icon and label for state that should scan without the visual weight of a badge.

Tones

A semantic tone colors only the leading visual. Pass an icon when a dot is not specific enough for the state.

QueuedRunningPassedDegradedFailed

tsx

<Status>Queued</Status>
<Status tone="accent">Running</Status>
<Status tone="success" icon={<CheckIcon />}>Passed</Status>
<Status tone="warning">Degraded</Status>
<Status tone="danger">Failed</Status>

Semantics

Status is not a live region by default. Add role=statusonly when an update should be politely announced as it changes.