kit

Status dot

A coloured dot beside the word for a state, like Online, Degraded or Paused, with an optional pulse for things happening now.

Tier 1 · CSS only Text label preview

Example

Online Away Offline Inactive In progress
Show the markup 
<div class="demo-stack">
  <span class="kit-status" data-tone="good">Online</span>
  <span class="kit-status" data-tone="warn">Away</span>
  <span class="kit-status" data-tone="bad">Offline</span>
  <span class="kit-status">Inactive</span>
  <span class="kit-status" data-tone="info" data-live>In progress</span>
</div>

Usage

<span class="kit-status" data-tone="good">Operational</span>
<span class="kit-status" data-tone="info" data-live>Syncing</span>

Use it in tables and lists where a full badge would be too heavy. data-live pulses the dot for something in progress; it stops for people who prefer reduced motion.

Accessibility

  • The word is the status; the dot only repeats it in colour, so the status never depends on seeing the colour.
  • In forced-colours mode the dot takes the text colour.