Status strip | Sodium design system

Styles

When to use it

Use: The top or foot of a pipeline, cluster or warehouse page: the two to six numbers a person checks before reading anything else.
Use: A row of counts that filter the list under it (failed, running, queued), one of them chosen.
Not for: One big headline number with a caption. Use Meter.
Not for: Many label and value pairs about one thing. Use Data list.
Not for: Picking one of a few views of the same data. Use Segmented control.

7 rules

Must: Keep a strip to two to six cells. Because past six, the cells wrap into rows on a laptop and the strip turns into a table nobody scans.
Must: Select at most one cell, and only when it filters or locates the view under it. Because the yellow wash means "you are here", and two of them leave the person asking which one the list follows.
Must: Render a cell that filters as a button with render={<button type="button"/>}. Because a div with onClick takes no focus and is not announced as a control.
Never: Set a value in capitals or in a label role; values go in StatusStripValue as written. Because values are compared and copied, and capitals change what eu-west-2 or 90ms say.
Must: Show an outcome in a cell with a StatusMark beside a value that names it, never a coloured number alone. Because a red 3 reads as a red 3; the mark and the label say it is three failures.
Never: Use the framed variant as a row inside a frame; use variant="plain" there. Because its own edge doubles the frame's rule, and a box inside a frame is the one thing Sodium never draws.
Should: Write labels as one or two nouns and keep the unit out of them; put it in StatusStripUnit.

4 states, highest first

4 checks

: The strip is a named group; each cell reads its label then its value.
: Labels are text-3, 5.6:1 on the page and 5.1:1 on the wash; values text-1, 18.3:1, and 16.5:1 on the wash.
: The selected cell sets aria-current="true"; the wash is never the only cue in forced colours, which draw an outline.
: A filtering cell is a real button with the 2px focus ring drawn inside its rules.

2 keys

4 edge cases

Narrow screen: Cells wrap into rows, each at least 160px; the rules still meet with no doubled edge.
Long value: Ends in an ellipsis inside its cell; give the full value a title or a tooltip.
Missing value: Write a dash and say why in the label's tooltip; never leave the cell blank.
Dark theme: The selected cell is the dark yellow tint under text-1, 11.7:1.

6 props

13 tokens