---
title: "Status"
description: "Render operational state with data-status — online, degraded, offline, unknown."
section: vault
prev-url: "wikilinks/"
prev-title: "Wikilinks"
next-url: "diff/"
next-title: "Diff"
type: vault
date: 2026-04-09
tags: ["vault", "status", "reference"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-5"
ai-provider: "Anthropic"

---

## Overview

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

```html
<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:

```html
<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.