Skip to content

Status

Preview Available in release assets

Label the current state of a record or service with text and a coloured dot, without turning the label into a control or a live region.

Status primary example

Show code
<p><span class="thin-status" data-variant="success">Synchronized</span></p>

Each authored example uses the production assets and includes copyable markup.

Neutral and toned statuses

Each tone keeps its word; colour only reinforces it.

Show code
<ul role="list">
  <li><span class="thin-status">Draft</span></li>
  <li><span class="thin-status" data-variant="success">Published</span></li>
  <li><span class="thin-status" data-variant="warning">Review due</span></li>
  <li><span class="thin-status" data-variant="danger">Sync failed</span></li>
</ul>

Anatomy

  • Inline span.thin-status
  • Decorative dot drawn by ::before in the current colour
  • Visible status text that carries the meaning
  • Optional data-variant tone

Variants and sizes

  • Neutral — shown above
  • Success (data-variant="success") — shown above
  • Warning (data-variant="warning") — shown above
  • Danger (data-variant="danger") — shown above

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Inline, localized, and right-to-left

The dot follows the reading direction and long labels wrap with the text.

Show code
<p>Deployment: <span class="thin-status" data-variant="success">Synchronized</span>.</p>
<p lang="de">Zustand: <span class="thin-status" data-variant="warning">Überprüfung der Zahlungsinformationen ausstehend</span>
</p>
<p dir="rtl" lang="ar">الحالة: <span class="thin-status" data-variant="danger">فشل</span>
</p>

System colors

In forced colors the dot uses the current system text colour and the label remains.

Show code
<p><span class="thin-status" data-variant="danger">Sync failed</span></p>
  • Inline in a sentence — shown above
  • Long localized label — shown above
  • Right-to-left reading direction — shown above
  • Forced colors — shown above

Interaction and keyboard behavior

A status is static text. When it changes after load, announce the change from a separate role=status region rather than from every status label.

Accessibility

The text, not the colour, carries the state; the dot is decorative and has no accessible name. Keep tone colours for success, warning, and danger at 4.5:1 against the surface, which the theme contrast table checks.

Contract
NATIVE
Basis
Styles native HTML elements; no APG widget

API

Use span.thin-status with visible text. Set data-variant=success, data-variant=warning, or data-variant=danger for a tone; omit it for a neutral status.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Without Thin-Sky CSS the status is plain inline text that still states the condition.

Assets and dependencies

  • /components.css

Dependencies: None

Source: packages/ui/src/items/status/style.ts

Composition

Derived from the examples and style specs, not authored.

Used by