StatusLabel
StableAccessible
Status labels can be used to highlight different statuses or items to the user. Status labels cannot be interacted with and they are only meant to convey relevant information.
Breaking change
The default rectangular status labels are deprecated. The rounded cornered variant will replace the default rectangular StatusLabel in the next major release.
Usage
Example
Completed
Principles
- A label text should always be provided with a status label. Do not use status labels without text or with icons only.
- Icons inside status labels are allowed if they are accompanied with a text label.
- Make sure the icon matches the visual label. Do not add an icon only for visual purposes.
- Icons inside status labels are allowed if they are accompanied with a text label.
- Keep labels short and concise. Use 1-2 words at maximum and do not use labels expanding to two rows.
- Use status colours consistently. You can find guidelines on when to use each status colour in the colour guidelines.
- Status labels are often related to some other element on the page (e.g. table row). Aim to keep the status label and its related elements close to each other so the user can easily interpret the relation.
Variations
Default
StatusLabel comes in five (5) different types. One neutral and four (4) with different status colours.
Neutral
Info
Success
Alert
Error
Rounded
Neutral
Info
Success
Alert
Error
With an icon
An icon can be used on the left side of the StatusLabel's text label. The icon should match with the text label and not be used only for visual purposes.