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.
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.
NeutralInfoSuccessAlertError
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.