Statusbar
A thin bottom strip for state: position, encoding, counts.
Examples
Statusbar
Anatomy
.statusbar | Tinted strip with a hairline above. Small, muted, tabular figures. |
> span | One item each, spaced evenly. |
> .end | The .end utility pushes an item, and everything after it, to the end edge. |
Accessibility
- The strip is silent to screen readers when it changes. Put
role="status"on the item that updates ("Saved", "3 errors") so the change is announced. - Muted extra-small text is meant for glanceable detail. Anything the user must act on belongs in an alert or toast.