Status

Render operational state with data-status — online, degraded, offline, unknown.

Overview

Use data-status on any element to convey operational state. ASW renders a coloured indicator — no CSS classes required.

<span data-status="online">API Gateway</span>
<span data-status="degraded">Search Index</span>
<span data-status="offline">Legacy Auth</span>
<span data-status="unknown">Webhook Relay</span>

Values

Value	Meaning	Indicator
`online`	Fully operational	Green dot
`degraded`	Reduced capacity or elevated errors	Amber dot
`offline`	Not reachable or deliberately down	Red dot
`unknown`	State not yet determined	Grey dot

Status Dashboard Pattern

Combine with a <dl> for a compact service health panel:

<dl>
  <dt>API Gateway</dt>     <dd data-status="online">online</dd>
  <dt>Search Index</dt>    <dd data-status="degraded">degraded</dd>
  <dt>Webhook Relay</dt>   <dd data-status="offline">offline</dd>
  <dt>Analytics</dt>       <dd data-status="unknown">unknown</dd>
</dl>

Usage Notes

data-status is intentionally display-only — it carries no ARIA role. For accessibility, pair with visible text (as shown above) rather than relying on the colour dot alone.