Indicator

Description

The Indicator combines a colored dot with a text label to communicate state at a glance. The dot conveys meaning through color; the label ensures the information is accessible without color perception.

Available variants: Green (success), Yellow (warning), Red (error), Blue (informational), No color (text only).

Indicators are display-only and must not be used as interactive elements.

Use Cases

• When showing the status of items in lists, tables, or dashboards.
• When communicating process states such as pending, active, or failed.

Usage

Rules & Guidelines

Never rely on color alone: Labels must describe the status independently of color.

Descriptive labels: Use meaningful text (e.g., “Active”, “Pending approval”) — not generic terms like “Status”.

Consistent semantics: Use the same color for the same meaning throughout the application.

HTML Structure

<div class="indicator success-green">
  <i aria-hidden="true" class="icon icon--dot-16"></i>
  <small>Indicator</small>
</div>

Accessibility

• aria-hidden on dot: The <i> is decorative — always add aria-hidden="true".
• Color contrast: Label text must meet WCAG 2.1 AA (4.5
  against background).
• No focus: Indicators are not interactive and must not receive keyboard focus.

Examples

• Success indicator
• Warning
• Critical
• Information
• Neutral info

Resources

• Indicator in Figma