Overview

Status indicator

Status indicators alert users to the status of a message so they can assess its importance and respond accordingly.

Status indicator

Usage

When to use
Use a status indicator to highlight the status of an item, task, or process. Dynamic in nature and read-only, it serves to communicate a change or an update to a particular interface element, and should not take the place of an action or button.
Semantic statuses
We have 5 types of semantic statuses. Apply each one according to the relevant use case as outlined below.
Green
Use green to communicate positive outcomes, such as complete, approved, accepted, or ready. It also has an unactivated version, which is used when the status is not yet fulfilled.
Yellow
Use yellow to call for attention, alerting users to something they need to act on in order to prevent mistakes, such as required information.
Cerise
Use cerise to communicate negative outcomes, such as an error or a declined status.
Blue
Use blue for informative purposes or to communicate something that's in progress, such as received or under review.
Charcoal
Use charcoal to communicate a resolved status with no more outcomes, such as terminated, ended, or unavailable.
Numerical statuses
Numerical statuses help users understand a positive or negative percentage or number change. The colours can be customised based on the country's cultural preference, such as red for a positive financial change in China.
Positive
Negative
Neutral
How best to use
Do
Stick with the default set of icons, and only customise the text labels according to the use case.
Don't
Don't only use icons without text labels, as users may not understand what they stand for.
Do
Place it close to the UI element it's labelling so users can understand the relationship.
Caution
Having too many status indicators in a single interface can be distracting. Consider whether the information is important enough to highlight with a status, and what other visual elements are on the page, to come up with a balanced design.
When not to use
Don't use it to spell out detailed status descriptions
Status indicators should be used to convey generic status information across a range of UI elements. If you're providing a detailed status description that goes beyond a few words, consider using body text or other components.
Don't use it as an interactive element
Status indicators are not interactive. If a status needs to be interactive, consider using the page-level message or other components.