Being a non-clickable UI element, the status light is used to provide a quick, at-a-glance indication of system states, alerts, or conditions within an interface. Designed for clarity and instant recognition, it seamlessly integrates into various layouts without adding cognitive load. Status lights follow a consistent color-coded system to ensure users can easily interpret their meaning. They are often used alongside other components, such as tables, accordions, or dashboards, to enhance visibility and provide contextual awareness.
- 1.Status light: the core visual element of a status light, designed as a dot for clarity and easy recognition.
- 2.Label: a short text description alongside the status light to provide additional context.
The status light component is available in five semantic variants, each represented by a distinct color. These colors ensure clear communication of different states.
Additionally, the component comes in three different sizes, allowing for flexibility across various layouts and screen sizes while maintaining readability and visual consistency.
| Variant | Description |
|---|---|
| Default | For neutral statuses, like archived, draft, paused... |
| Info | For live statuses, like active, in use, uploaded... |
| Success | For positive statuses, like finished, approved, completed... |
| Warning | For pending or critical statuses, like scheduled, in progress, processing... |
| Error | For negative statuses, like incomplete, rejected, failed... |
- Ensure semantic accuracy: always match each status light color with the correct meaning to maintain clarity and avoid misinterpretation.
- Optimize for different screen sizes: Select the appropriate size to ensure visibility and legibility across various layouts.
- Use clear and concise labels: Keep them brief and ensure they accurately describe the current state.
- Combine with badges carefully: status lights and semantic badges can only be used together if one of them does not use a semantic color or if their semantic colors do not contradict each other. This prevents misinterpretation and maintains clarity in data visualizations such as tables, charts, or grids.
- Use strategically: overusing status lights in interfaces with high cognitive load can overwhelm users and disrupt readability. Use them only where they add real value.