Keep the current condition of an item understandable without relying on color alone.
A status indicator describes the current condition of an item or process. Place it close to the thing it describes so people can scan a collection without opening every item. Use an outcome message when the important information is that something just changed.
| Meaning | Presentation |
|---|---|
| A stable condition such as Draft or Published | Clear text, optionally paired with an appropriate icon |
| An operation with measurable completion | ProgressIndicator with a linear value |
| An operation with unknown duration | An indeterminate ProgressIndicator |
| A condition needing an explanation or action | Inline text or Banner with a useful next step |
Liquidify Text can render a semantic text element. LabeledContent can pair a label with a status value in a summary. There is no need to invent a Badge API to describe status. If the product needs a custom status treatment, use page-owned classes and supported tokens while retaining readable text.
Figure in preparation
Status indicators: interaction sequence
Persistent condition, pending work, and recovery are separate states.
For a report, “Draft,” “Publishing,” and “Published” are distinct states. Do not show “Published” when the request has merely started. If publishing fails, retain the draft and show a failure message with the next action.
Distinguish unknown from healthy, and stale from current. If a connection is lost, keep the last known state only with an explanation of its freshness when that affects decisions. An absent status value should not default to success.
Define status vocabulary at the application level. The same label should mean the same thing across a detail page and its list. If retry is possible, make it a separate action rather than turning an unlabeled colored dot into a hidden control.
Use short labels that express a condition: “Needs review” is clearer than “Warning.” Add a timestamp or explanation when it helps people judge freshness. Keep long descriptions in adjacent detail rather than squeezing them into a tiny marker.
Use Color guidance for semantic roles. Do not assume an accent color means success or that red alone explains a failure.
Keep text available alongside icons and color. Status text that is present at page load does not automatically need a live region. For a significant update, announce a concise change in context; avoid making every cell in a large collection an independent live region.
Do not add a tab stop to a purely informational marker. If the indicator opens details, give that action proper control semantics and an accessible name. Review contrast in both themes and over actual surfaces.
See Text, LabeledContent, ProgressIndicator, and Banner. Read Notifications for outcome feedback and Loading for progress values.