ds
Components
Status dot

Status dot

Healthy, degraded, down and live.

Live All systems normal Elevated latency on search Checkout is down Not checked yet

Code

<span class="status"><span class="status-dot live"></span>Live</span>
<span class="status"><span class="status-dot"></span>All systems normal</span>
<span class="status"><span class="status-dot warn"></span>Elevated latency on search</span>
<span class="status"><span class="status-dot down"></span>Checkout is down</span>
<span class="status"><span class="status-dot idle"></span>Not checked yet</span>

A 7px dot with a soft halo in its own colour. .live adds a slow ping for something updating in real time; .down blinks. Always put words next to the dot.

Class	On	What it does
`.status-dot`	span	The dot. Default is ok (green).
`.warn / .down / .idle`	.status-dot	Amber, blinking red, grey.
`.live`	.status-dot	Adds a ping ring.
`.status`	span	Dot and text in a row.