Status Light

Small colored indicator with semantic status variants, optional label text, and size variants.

Online Offline Review Pending Unknown

Open Status Light Playground

Open in Figma

Anatomy

1 2 Online
  1. 1 Indicator dot — semantic status color
  2. 2 Label text — optional status label

Options

Variants

Positive
Positive
Negative
Negative
Notice
Notice
Info
Info
Neutral
Neutral

Sizes

Medium
MD
Small
SM

Table of options

PropertyValuesDefault
texttext—
variantneutral / positive / negative / notice / infoneutral
sizemd / smmd

Accessibility

  • Status Light is non-interactive and not focusable.
  • Dot is decorative (aria-hidden="true"); label text carries meaning.
  • Do not rely on color alone for critical status communication.