Badge
Pill, 24.6px, 12px text. Status variants sit on their soft tint with the solid as text. The task lifecycle badge maps the nine states a task can be in onto those variants plus a glyph, so colour never carries the meaning alone.
import { TaskStateBadge } from "@stocklots/ui-components/components/task-state";
<TaskStateBadge state="waiting" label="Waiting on Finance" />Variants
Count
Unread and totals: primary chip, tabular digits so a changing number never jitters.
Lot card — sale form
One per card, first in the row: how the lot sells. Fixed price is the neutral chip; offers and auction take a status tint because they ask the buyer to act.
Lot card — listing state
Time and standing: new listing, auction ending, the viewer's bid position, sold. A glyph on the time-boxed ones so colour never carries it alone.
Lot card — facts
Quantity, packaging, origin: outline chips, tabular digits. Facts never take a status tint.
Product card — condition
Condition is a stated fact, not a verdict: outline on every value, as the prototype's lot card draws it.
Product card — shelf life
Best-before as a dated fact; short-dated once it is inside the buyer's sell-through window.
Product card — provenance
Where a field came from: AI-suggested values ride the running (agent) tint with the sparkle; matched and verified are success; unmatched EAN is hold — a pause for the seller, not a failure.
Task lifecycle
queued · scheduled · running (agent) · waiting on you · on hold · blocked · done · failed · cancelled. Waiting is the one that interrupts; hold is a person's pause.
Custom label
Keep the state, change the words.