Boluo/ design
Sheet 02.21 / Components · Data

Status

Live or offline, as a dot and a mono label. Never colour alone: the label always says the state.

CLASSb-statusDRAWNCLAUDECHECKEDBOLUOLICENSEMIT
Fig. 1 — statuslive, from bundle.css
build / status
Live Offline
Anatomy

Parts

PartClassNotes
Live.b-status.livePineapple dot with an ink ring, rind label.
Offline.b-status.offFaint dot, muted label.
Markup

Code

bundle.css
<div style="display:flex;gap:24px">
  <span class="b-status live">Live</span>
  <span class="b-status off">Offline</span>
</div>
Do
  • Add a date to Offline when you have one.
  • Keep the label short.
Don't
  • Drop the label and rely on the dot.
  • Invent states beyond live and offline.
© 2026 Boluo · with ClaudePixel pineapple