Status Dot

A small round indicator beside a label: presence, the state of a service, a chart legend.

Default

A dot and the label that says what it means.

html

Online

<span class="vt-flex vt-items-center vt-gap-2 vt-text-sm">
  <span class="vt-dot vt-dot-success" aria-hidden="true"></span>
  Online
</span>

Colors

Neutral by default. Brand for accent (unread, current); the intents only for their states.

html

Offline Unread Scheduled Online Away Busy

<span class="vt-flex vt-items-center vt-gap-2 vt-text-sm">
  <span class="vt-dot" aria-hidden="true"></span>
  Offline
</span><span class="vt-flex vt-items-center vt-gap-2 vt-text-sm">
  <span class="vt-dot vt-dot-brand" aria-hidden="true"></span>
  Unread
</span><span class="vt-flex vt-items-center vt-gap-2 vt-text-sm">
  <span class="vt-dot vt-dot-info" aria-hidden="true"></span>
  Scheduled
</span><span class="vt-flex vt-items-center vt-gap-2 vt-text-sm">
  <span class="vt-dot vt-dot-success" aria-hidden="true"></span>
  Online
</span><span class="vt-flex vt-items-center vt-gap-2 vt-text-sm">
  <span class="vt-dot vt-dot-warning" aria-hidden="true"></span>
  Away
</span><span class="vt-flex vt-items-center vt-gap-2 vt-text-sm">
  <span class="vt-dot vt-dot-danger" aria-hidden="true"></span>
  Busy
</span>

Sizes

8px by default; vt-dot-sm is 6px, for a badge or a line of small text.

html

Small Default

<span class="vt-flex vt-items-center vt-gap-2 vt-text-xs"><span class="vt-dot vt-dot-sm vt-dot-success" aria-hidden="true"></span>Small</span>
<span class="vt-flex vt-items-center vt-gap-2 vt-text-sm"><span class="vt-dot vt-dot-success" aria-hidden="true"></span>Default</span>

Pulse

vt-dot-pulse adds a halo for something live. Use one at a time; it stops under reduced motion.

html

Live Recording

<span class="vt-flex vt-items-center vt-gap-2 vt-text-sm">
  <span class="vt-dot vt-dot-danger vt-dot-pulse" aria-hidden="true"></span>
  Live
</span>
<span class="vt-flex vt-items-center vt-gap-2 vt-text-sm">
  <span class="vt-dot vt-dot-success vt-dot-pulse" aria-hidden="true"></span>
  Recording
</span>

In a Badge

In a soft badge vt-dot-current takes the badge color; a warning badge names it: vt-dot-warning.

html

Operational Degraded Outage

<span class="vt-badge vt-badge-soft vt-badge-success"><span class="vt-dot vt-dot-sm vt-dot-current" aria-hidden="true"></span>Operational</span>
<span class="vt-badge vt-badge-soft vt-badge-warning"><span class="vt-dot vt-dot-sm vt-dot-warning" aria-hidden="true"></span>Degraded</span>
<span class="vt-badge vt-badge-soft vt-badge-danger"><span class="vt-dot vt-dot-sm vt-dot-current vt-dot-pulse" aria-hidden="true"></span>Outage</span>

Legend

Dots name the series of a chart; brand for the main one, neutral for the rest.

html

Desktop
Mobile

<ul class="vt-flex vt-flex-wrap vt-gap-4 vt-text-sm">
  <li class="vt-flex vt-items-center vt-gap-2"><span class="vt-dot vt-dot-brand" aria-hidden="true"></span>Desktop</li>
  <li class="vt-flex vt-items-center vt-gap-2"><span class="vt-dot" aria-hidden="true"></span>Mobile</li>
</ul>

Guidelines

Away

Say the status in words; the dot repeats it in color.

Don't

Don't leave a row of bare colored dots — color alone says nothing to a screen reader or to color-blind eyes.

Anatomy

span.vt-flex.vt-items-center.vt-gap-2   ← The status line
├── span.vt-dot.vt-dot-{color}          ← The dot (aria-hidden)
└── "Online"                          ← The label says the status

API Reference

Class	Type	Description
`vt-dot`	Base	An 8px round dot, neutral (foreground-muted) — offline, idle, inactive
`vt-dot-brand`	Color	Brand — unread, current, the main series of a chart
`vt-dot-info`	Color	Info — scheduled, informational
`vt-dot-success`	Color	Success — online, operational, done
`vt-dot-warning`	Color	Warning — away, degraded
`vt-dot-danger`	Color	Danger — busy, down, live
`vt-dot-current`	Color	The text color around it — a dot inside a soft badge takes the badge's color
`vt-dot-sm`	Size	6px — inside a badge or next to small text
`vt-dot-pulse`	Modifier	A pulsing halo for something live; stops under prefers-reduced-motion

Accessibility

Feature	Details
Label	The text beside the dot says the status; the dot itself is aria-hidden="true"
Standalone	A dot without text (in a dense table) takes role="img" and an aria-label, e.g. "Online"
Color	Color is never the only signal — the label or the aria-label carries the meaning
Motion	The pulse stops under prefers-reduced-motion; the dot stays

Built with:

Badge