Status indicators

It is important to convey the state of an feature, component or asset to the user in a consistent and clear manner. This pattern aims to provide a resource for ensuring status is applied consistently across our applications.

General construction

A status describes the condition of an item at a particular time. Status indicators highlight page elements and communicate severity. They are an important visual tool to help users identify the condition of events, assets or processes and decide on their course of action. Status indicators use different elements (colors, symbols, shapes and labels) and combine them to help users identify the states they represent.

Colour

Use signal colours only where important information takes place.

# Colour When to use
1 Red Failed, Error, Rejected
2 Orange Awaiting consent, Pending
3 Grey Inactive, Complete
4 Blue Ready for submission, Get started
5 Green Success, Underway