e47a9f4401
- 2.1: packs/ -> archive/packs/ - 2.2: site/ -> archive/site/ - 2.3: src/lab/ -> archive/lab/ - 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
53 lines
1.5 KiB
Markdown
53 lines
1.5 KiB
Markdown
---
|
|
title: "Status"
|
|
description: "Render operational state with data-status — online, degraded, offline, unknown."
|
|
section: notes
|
|
prev-url: "wikilinks/"
|
|
prev-title: "Wikilinks"
|
|
next-url: "diff/"
|
|
next-title: "Diff"
|
|
type: notes
|
|
date: 2026-04-09
|
|
tags: ["notes", "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.
|