Status Light
Status Lights, as semantic elements, allow the user to display the completion status of tasks, processes and more.
The Status light component serves as a powerful communicator of an element or process' status. It focuses exclusively on conveying semantic information within a range of five variants, each of them aligned with its specific process status.
- Match each status light variant with the correct semantic meaning to communicate clearly and consistently messages about our statuses.
- Use each size of the component according to the different screen sizes where it will be placed, paying special attention to maintaining legibility and functionality.
- Use concise and precise labels that reflect the status of a process accordingly. You should not use more than three words in a status light label.
- Mix semantic meanings within Status lights, as this will lead to confusion and misinterpretation of process states.
- Use Status light and semantic badges in the same data visualization format (tables, charts, data grids...).
- Overuse the component. In screens with high cognitive load, you should not overuse this component, as it may confuse users and interrupt the reading flow.
The Status light component has five different modes, each one corresponding to its semantic meaning.
Variants: default, info, success, warning and error.
| 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... |