Skip to content
WovenUI

Status dot

wu-dot is a small status marker. It is round, except success, a check, warning, a triangle, and danger, an octagon, so the status is not shown by color alone. A dot is decoration: put the status in text next to it, and mark the dot aria-hidden="true".

Class or variable Effect
wu-dot Root. Strong border color, 0.5rem
brand, success, danger, warning, info Role fill. Success, warning and danger also change the shape
corner Pins the dot to the top inline-end corner of a wu-badge-host (see Corner)
animated Fading ring for a live status, opt-in
--wu-dot--Size Width and height

Default and roles

Section titled “Default and roles”
  • Unknown
  • Assigned
  • Online
  • Down
  • Degraded
  • Maintenance
<ul class="flex wrap x-center gap-4">
  <li class="flex x-center gap-2"><span class="wu-dot" aria-hidden="true"></span>Unknown</li>
  <li class="flex x-center gap-2"><span class="wu-dot brand" aria-hidden="true"></span>Assigned</li>
  <li class="flex x-center gap-2"><span class="wu-dot success" aria-hidden="true"></span>Online</li>
  <li class="flex x-center gap-2"><span class="wu-dot danger" aria-hidden="true"></span>Down</li>
  <li class="flex x-center gap-2"><span class="wu-dot warning" aria-hidden="true"></span>Degraded</li>
  <li class="flex x-center gap-2"><span class="wu-dot info" aria-hidden="true"></span>Maintenance</li>
</ul>

Size

Section titled “Size”
<div class="flex x-center gap-3">
  <span class="wu-dot success" style="--wu-dot--Size: 0.375rem" aria-hidden="true"></span>
  <span class="wu-dot success" aria-hidden="true"></span>
  <span class="wu-dot success" style="--wu-dot--Size: 0.75rem" aria-hidden="true"></span>
</div>

Corner

Section titled “Corner”

Inside a wu-badge-host (the same wrapper the badge uses), corner pins the dot to the top inline-end corner of an icon, avatar or link. Say the status in the label of the host.

AL 
<div class="flex wrap x-center gap-6">
  <span class="wu-badge-host">
    <button class="wu-btn" type="button" aria-label="Notifications, new">Alerts</button>
    <span class="wu-dot corner danger" aria-hidden="true"></span>
  </span>
  <span class="wu-badge-host">
    <span class="wu-avatar blue" role="img" aria-label="Ana Lopez, online">AL</span>
    <span class="wu-dot corner success" aria-hidden="true"></span>
  </span>
</div>

Animation

Section titled “Animation”

animated (or wu-animated on an ancestor) adds a ring that grows and fades, for a live status. Reduced motion turns it off.

Live
<span class="flex x-center gap-2"><span class="wu-dot success animated" aria-hidden="true"></span>Live</span>

Load only the dot

Section titled “Load only the dot”
@use "@wovenui/components/dot";

The dot needs no other component.