StatusTag
React status pill with a colored dot and label for request and process states: success, warning, error, info, and neutral tones in filled or subtle styles.
StatusTag pairs a colored dot with a short label. Set tone for the meaning and status for the fill; use Tag for categories instead.
When to use
Use StatusTag wherever a record has a state: "Under review", "Approved", "Rejected", "Paid". Pick the tone for meaning and keep the wording consistent across screens so users learn the vocabulary.
Use Tag for categories that are not states.
Examples
Props
Props declared by StatusTag. Native attributes of the underlying element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
tone | "error" | "neutral" | "success" | "warning" | "info" | ||
status | "ghost" | "subtle" | "inverted" | ||
size | "sm" | "md" | "lg" |
Accessibility
The state is carried by the text. The colored dot is decorative and aria-hidden, so meaning never depends on color alone.
Tones are chosen to meet contrast in both fills and both themes. Keep labels short and identical in every table and card that shows the same state.