Status chip
A restrained status label with a semantic tone and visible text.
Built on Workshop1 composition
DraftArchivedIn progressAwaiting approvalPaidPayment failed
Usage
import { StatusChip } from "@workshop1/ui/components/status-chip"Map each domain status to one stable tone at the feature boundary. success keeps the hairline chip and colours only its dot with success, while danger is the only tone that shouts. Do not choose tones per screen or infer them from arbitrary strings.
The dot is decorative. The text must carry the full meaning, so labels such as “Paid” and “Payment failed” remain understandable without colour.
Accessibility
Status changes that happen after an action need an appropriate live region in the owning feature. The chip itself is visual output and should not be made interactive.