Status Light

Anatomy

Options

Variants

Variants select an appearance; they do not infer meaning from the label. Choose the variant and wording together. The implementation does not add alert or live-region semantics.

Sizes

Container scaling

Use the Scale switch beside Light/Dark in the preview above, or set data-scale="small|medium|large" on a containing element. Font size, line height, spacing and radii inherit that context. A local size="sm" remains smaller within the chosen context; it does not cancel the container scale. Track/indicator dimensions and border widths keep their existing local-size behavior.

The default context is medium. Nested containers can replace the inherited context explicitly, without multiplying the parent context again. Brand and light/dark mode remain independent. The current adopters are Status Light, Meter and Progress Bar; existing components have not been migrated implicitly.

Table of options

Behaviors

Usage guidelines

Use a stable position near the item it describes. Keep category labels and actionable controls separate from the condition.

Content standards

• Use short condition names in sentence case, such as “Online”, “Pending review” or “Unavailable”.
• Describe the current condition; put causes and recovery instructions in nearby content.
• Provide localized text. The component does not translate labels.

Keyboard interactions

Status Light has no keyboard commands and does not enter the tab order. Any related action needs its own focusable control.

Accessibility

• The label provides the meaning. The dot has aria-hidden="true".
• No interactive role or live-region behavior is added automatically.
• If a background update must be announced, update a surrounding status region with suitable aria-live behavior. Avoid repeated or unnecessary announcements.
• Keep the label visible; color alone must not communicate the condition.

Implementation

Import the individual module once, or use the aggregate ui-foundations/elements entry.

import "ui-foundations/elements/ui-status-light";

<uif-status-light id="connection-status" variant="positive">Online</uif-status-light>

const status = document.querySelector("#connection-status");
status.setAttribute("label", "Unavailable");
status.setAttribute("variant", "negative");

For static HTML without Custom Element JavaScript, use the macro:

{% import "macros/ui.njk" as uif %}
{{ uif.statusLight("Online", variant="positive", size="sm") }}

The macro emits .uif-status-light, .uif-status-light-indicator and .uif-status-light-text spans. Text is escaped; arbitrary HTML children are not part of the text API.

The scale belongs to the container, not to the component's size attribute:

<div data-scale="large">
  <uif-status-light size="sm" label="Online"></uif-status-light>
</div>

Theming

Use the brand and mode switches in the preview above. Visual values come from the pattern's --uif-status-light-* slots and existing Semantic roles. Labels use semantic content color. An inward outline keeps colored markers or fills discernible across light and dark surfaces.

Set data-brand="a", "b" or "c" and data-mode="light" or "dark" on the root element. Consumers own activation of these contexts. See Design Tokens.

Tokens

Use container scale and local size for typography and spacing. The table lists component overrides.

Design checklist

The browser checks cover specific Runtime behavior and contrast pairs; they do not certify complete accessibility or live design parity.