Status Indicator
Where something stands, in a word and a dot. Specification: docs/components/status.md
Basics
A <span class="canon-status"> around its .canon-status-label; the theme draws the dot. data-intent says what the status means, in the same words as a Button's or a Tag's: info, success, warning, danger. With none it is neutral: a hollow ring, nothing happening yet.
In a list
Its place: a column of a Table or a Data Table, where many rows need a status each and a chip per row would be loud.
| Invoice | Customer | Due | Amount | Status |
|---|---|---|---|---|
| INV-2041 | Globex Corporation | 3 Oct 2026 | €12,400.00 | Overdue |
| INV-2040 | Initech | 28 Oct 2026 | €6,900.00 | Due soon |
| INV-2039 | Umbrella | 12 Oct 2026 | €3,150.00 | Paid |
| INV-2038 | Soylent | 30 Oct 2026 | €980.00 | Sent |
| INV-2037 | Hooli | — | €15,000.00 | Draft |
In progress
data-pulse: something is happening right now. Use it for the few states that change by themselves (syncing, deploying), not for "pending".
Status or Tag?
The same words, two weights. A Status in text and lists; a Tag where the status is the point (beside a record's title in its Page Header).
The dot only
data-display="icon": the label is hidden, still read. Only where something else says what the colors mean (a legend, a column header, a tooltip on what it sits beside): on its own, a dot is a color.
Sizes
data-size on the status or a container: sm, md, lg.
Edge cases
Right to left, the dot comes first on the right. A long label in a narrow place is cut, keeping its whole text as its name.