Status Lights
Status lights describe the state of an entity. They are used to convey a semantic meaning.
Add .qw-statuslight to the element containing the text label, along with the appropriate status variant class.
<div class="qw-statuslight qw-statuslight-neutral">
Default status indicator
</div>
.qw-statuslight-neutral is the Default status, and is used to indicate items that are archived, deleted, paused, draft, or not started.
Variants
Informational
Used to indicate items that are active, in use, or live. Add the class qw-statuslight-info.
Danger
Used to indicate items that are in error, alert, rejected, or have failed. Add the class qw-statuslight-danger.
Success
Used to indicate items that are approved, complete, success, new, purchased, or licensed. Add the class qw-statuslight-success.
Warning
Used to indicate items that need approval, are pending, scheduled, syncing, indexing, or processing. Add the class qw-statuslight-warning.
Best practices
- Status indicators should be used to help users read an object's state quickly
- Do not use status indicators to categorize objects.
- Status indicators should always include a label. Color alone is not sufficient to convey meaning.