StatusPill / StatusDot

The house vocabulary for how a record is doing, in two sizes, plus CodePill for a module's own codes; state only, never selection, naming or identity.

Jobs table filtered by status

A status pill doubles as a facet toggle; the bar above shows the applied chip

Filter

Status

8 of 8 jobs

Job	Module	Catalog
job_9421	Content	AC Delco Q3
job_9420	Normalize	Brake & Chassis
job_9419	Scrape	Lighting SKUs
job_9418	Part Type	Filters (May)
job_9417	Content	AC Delco Q3
job_9416	Normalize	Brake & Chassis
job_9415	Scrape	Lighting SKUs
job_9414	Content	Filters (May)

Job list with a status legend

StatusDot leads each row; click a legend kind to isolate it

AC Delco Q3 content pass

Aakarsh C.

Brake & Chassis normalize

Dana P.

Lighting SKUs scrape

Jeremy O.

Filters (May) part type match

Kate M.

AC Delco Q3 content retry

Aakarsh C.

Lighting SKUs normalize

Dana P.

Click a legend kind to isolate it.

A run's live pill

kind, dotPulse, and the row count all move on a timer; pause holds it

Queued0

Compact dots in a dense table

StatusDot trades the label for width; toggle to compare against the full pill

Job	Module	Status
job_9421	Content
job_9420	Normalize
job_9419	Scrape
job_9418	Part Type
job_9417	Content
job_9416	Normalize

What a state means, on hover

Tooltip explains the pill; step through the states to see each explanation

Queued

Hover the pill for what this state means.

A module's own codes

CodePill reads a code's label and description from the map the module's manifest declares (error types, review reasons); a code the map does not know shows as typed

Error types

Rate limited

No match

Bad input

timeout

Review reasons

Low confidence

Ambiguous

Hover a pill for the description the manifest declared.

One status map for table, toolbar and dropdown

defineStatusMap declares each state's word, tone and tip once; the pill, the filter options and their colour dots all read it

Stage

Job	Stage
Brake pads, October	Done
Rotors, October	Running
Wipers, supplier B	In review
Filters, supplier C	Failed
Gaskets, supplier A	Queued

Soft (default)

bg from the status var, text in its line tone

Complete

Needs review

Failed

Processing

In review

Draft

Line

transparent bg, bordered, text in the line tone

Complete

Needs review

Failed

Processing

In review

Draft

Solid

soft/line pair inverted: bg=line, text=soft

Complete

Needs review

Failed

Processing

In review

Draft

Small pills for table cells

sm/md sizes, an optional leading icon, a trailing count

Small

Medium

Errors

Queued12

One glyph, fading zero, truncating label

An icon replaces the dot instead of sitting beside it, a zero count fades, and a clipped label shows its full text on hover

Dot only

Icon only

Both passed, icon wins

Failed12

Review3

Queued0

Waiting on a vendor catalog refresh

Kind, variant, icon, and count together

kind x variant x icon x count: the shapes real tables use

Enhanced

Needs review3

Failed

Queued

In review12

Draft

Done148

Attention

Errors2

Processing

StatusDot

the compact sibling for ledgers, tab bars, steppers

CompleteNeeds reviewFailedProcessingIn reviewDraft

xssmpulse (in-progress)

In the wild

The combinations walmart's 28 live call sites actually use, as one matrix

active

degraded

failed

in review3

archived

live

kind everywhere; size=sm inside tables; dot and dotPulse for liveness; count rides review queues; soft-outline marks the muted archive states.

Styling slots

Every className the component exposes, and what it reaches

StatusPill

className: the pill itself
iconClassName: the leading icon
countClassName: the trailing count

StatusDot

className: the dot
labelClassName: the text beside it