Components

Badge

Status is a dot and a word. No chip, no background fill, no border wrapper. The colored dot carries all the semantic signal — the surrounding layout provides context.

Status indicators

Used inline in tables, lists, cards, and panels. The dot is 6–7px. Text is always secondary (#4e4e4e), never the semantic color.

RunningIn progress / healthy

ActiveSelected / enabled

PausedWarning / suspended

ErrorFailure / blocked

DraftUnpublished / pending

ArchivedInactive / historical

In context — table

Status sits in a column alongside other data. The dot keeps visual weight minimal so name and metadata stay primary.

AgentStatusRunsUpdated

agent-core-v2Running1422h ago

data-pipeline-1Error385m ago

workflow-alphaDraft01d ago

knowledge-syncPaused213h ago

Specifications

Dot size6–7px

Dot shapeFull circle (rounded-full)

Gap8px between dot and label

Font size13px

Font weight500

Text color#4e4e4e (secondary)

No wrapperNo background, no border, no pill

Rules

No chip wrapper. Background fills and pill borders add visual noise without information value.
Dot color is semantic — green/red/amber/blue/gray — never the brand accent for decoration.
Text stays secondary (#4e4e4e). Never color the label text to match the dot.
Dot size is 6–7px. Larger dots compete with primary content; smaller dots are hard to distinguish.
Use in tables, lists, cards. For global system alerts, use the system banner pattern instead.