Status Badge
Status badges are static components used to convey an entity’s progress through a series of stages.
The set is composed of eight coloured and one gray style.
Anatomy
The status badge has two parts:
Text Label
Coloured background, with or without icon
Availability
Default (no icon) Badges
These may be used sparingly in Wordpress pages with the approval of the Digital Communications team. They may be used in public and staff applications as needed.
Icon Badges
These may not be used in Wordpress pages, but may be used in public and staff applications as needed.
Use Cases
Status badges are great for dashboards or tables for anything that progresses through a series of stages. Some examples for use cases include:
Indicating progress towards accomplishing strategic objectives in a table
listing the renewal status of a business licence
Colour Styles
The colour styles were chosen as eight equally-spaced colours on the colour wheel, plus an existing gray colour.
Colour | Hex | Contrast (on white) | Note |
|---|---|---|---|
Red | #E2220D | 4:69:1 |
|
Orange | #D46D0C | 3.5:1 |
|
Yellow | #E2D00D | 1.58:1 | Yellow on white is not contrast compliant. Ensure the status label is self-explanatory, as the icon/colour cannot be the only means of communicating status information. |
Green | #196B11 | 3.11:1 | Uses the feedback/success green. |
Teal | #129B96 | 3.41:1 |
|
Blue | #337AB7 | 4.55:1 | Uses the primary light blue. |
Purple | #8933C6 | 4.29:1 |
|
Magenta | #CB3393 | 4,73:1 |
|
Gray | #6E787C | 4.52:1 | Uses the established dark gray colour. |