Status dot – Tsunami

Statuses

Set data-status. Omit it for neutral.

Online Degraded Offline Syncing Idle

<div class="stack" data-direction="row" data-gap="lg">
  <span class="dot" data-status="success">Online</span>
  <span class="dot" data-status="warning">Degraded</span>
  <span class="dot" data-status="danger">Offline</span>
  <span class="dot" data-status="info">Syncing</span>
  <span class="dot">Idle</span>
</div>

Live

data-pulse adds a soft ring that repeats. It stops when the visitor prefers reduced motion, and the plain dot stays.

Live Recording

<div class="stack" data-direction="row" data-gap="lg">
  <span class="dot" data-status="success" data-pulse>Live</span>
  <span class="dot" data-status="danger" data-pulse>Recording</span>
</div>

In a list

The dot sits on the middle of the line and follows the text colour. Without a label, give it a name for screen readers.

Payments API

Webhook delivery

<div class="stack">
  <p><span class="dot" data-status="success">Payments API</span></p>
  <p><span class="dot" data-status="warning">Webhook delivery</span></p>
  <p><span class="dot" data-status="danger" role="img" aria-label="Offline"></span></p>
</div>

Attributes

Attribute / element	Values	Description
`.dot`		Inline element: an 8px dot, then the label text if any.
`data-status`	`success`, `warning`, `danger`, `info` (omit for neutral)	Dot colour, from the semantic colour variables.
`data-pulse`	boolean	Soft repeating ring for a live state.

Accessibility

Colour alone is not enough. Keep a text label, or put role="img" and an aria-label on a dot without one.
The pulse is decoration and stops under prefers-reduced-motion.