Status Dot

Use status dots to show the current state of users, services, or items at a glance.

Status Colours

Online
Away
Busy
Offline

<span class="status-dot status-dot-success"></span> Online
<span class="status-dot status-dot-warning"></span> Away
<span class="status-dot status-dot-error"></span> Busy
<span class="status-dot status-dot-neutral"></span> Offline

Sizes

Small
Default
Large

<span class="status-dot status-dot-sm status-dot-success"></span>
<span class="status-dot status-dot-success"></span>
<span class="status-dot status-dot-lg status-dot-success"></span>

Pulsing Animation

Use a pulse animation to draw attention to active or live statuses.

Live now
Recording

<span class="status-dot status-dot-success status-dot-pulse"></span>

With Text Label

System operational

<span class="status-indicator">
  <span class="status-dot status-dot-success"></span>
  <span class="status-label">System operational</span>
</span>

Service Status

WebsiteOperational
APIOperational
Payment ProcessingDegraded
Email NotificationsOutage

Use Cases

Colour	Status	Use for
Green	Success/Active	Online, operational, approved, active
Amber	Warning/Pending	Away, degraded, pending, attention needed
Red	Error/Critical	Busy, outage, rejected, critical
Grey	Inactive/Unknown	Offline, disabled, unknown, inactive

Accessibility

Never rely on colour alone - always provide a text label
Use aria-label or visible text to describe the status
Ensure sufficient colour contrast
Provide context for what the status means

CSS Classes

.status-dot { }
.status-dot-sm { }
.status-dot-lg { }
.status-dot-success { }
.status-dot-warning { }
.status-dot-error { }
.status-dot-neutral { }
.status-dot-pulse { }
.status-indicator { }
.status-label { }