Status
StatusLight
Spectrum's quiet status: a colored dot followed by a word.
Preview
Props
| Prop | Type | Description |
|---|---|---|
status | Status | |
variant | Semantic | |
size | 'S' | 'M' | |
mark | boolean | A shaped marker (ring, half, dot in a ring, solid, alert, check) in place of the dot. |
progress | number | With mark, draws a stage pie filled to this fraction (0 to 1; 1 is a check). Project statuses supply it. |
className | string | |
children | React.ReactNode |
Guidelines
Spectrum's quiet status: a colored dot followed by a word. Lighter than a badge, for tables and dense lists.
Provide: status (same set as Badge) or variant with children, size (S or M), and mark for a shaped marker in place of the dot.
- The word carries the meaning; the dot only helps scanning. Never show a dot without a word.
- With
mark, project statuses (or aprogressfrom 0 to 1) draw a stage pie instead: an empty ring, then a fifth more for each stage, then a green check. markswaps the dot for a shape: a ring (neutral), a half (informative), a dot in a ring (notice), a solid circle (accent), an alert (negative) and a check (positive). Use it for to-do statuses, where blue In progress and blue Scheduled would otherwise look the same, and wherever the mark must stand alone in a tight space, like calendar chips.- Use status lights in tables and schedules; use badges on cards and rows that need more weight.