Component gallery

StatusPill / StatusDot

The status vocabulary as pills and dots: one kind enum, consistent color, and the facet-friendly compact forms.

Jobs table filtered by status

A status pill doubles as a facet toggle; the bar above shows the applied chip
Filter
8 of 8 jobs
JobModuleCatalogStatus
job_9421ContentAC Delco Q3
job_9420NormalizeBrake & Chassis
job_9419ScrapeLighting SKUs
job_9418Part TypeFilters (May)
job_9417ContentAC Delco Q3
job_9416NormalizeBrake & Chassis
job_9415ScrapeLighting SKUs
job_9414ContentFilters (May)

Job list with a status legend

StatusDot leads each row; click a legend kind to isolate it
AC Delco Q3 content passAakarsh C.
Brake & Chassis normalizeDana P.
Lighting SKUs scrapeJeremy O.
Filters (May) part type matchKate M.
AC Delco Q3 content retryAakarsh C.
Lighting SKUs normalizeDana 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
JobModuleStatus
job_9421Content
job_9420Normalize
job_9419Scrape
job_9418Part Type
job_9417Content
job_9416Normalize

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.

Soft (default)

bg from the status var, text in its line tone
CompleteNeeds reviewFailedProcessingIn reviewDraft

Line

transparent bg, bordered, text in the line tone
CompleteNeeds reviewFailedProcessingIn reviewDraft

Solid

soft/line pair inverted: bg=line, text=soft
CompleteNeeds reviewFailedProcessingIn reviewDraft

Small pills for table cells

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

Kind, variant, icon, and count together

kind x variant x icon x count: the shapes real tables use
EnhancedNeeds review3FailedQueuedIn review12Draft
Done148AttentionErrors2Processing

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
activedegradedfailedin review3archivedlive

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
@versable-git/ui · all states, both themes