Badges

Guiding principle: Help the user be successful the first time.

When to use this component

Badges are read-only status indicators.

Use the badge component when there is a status of something and it is useful for the user to know about that status.

For example:

• “submitted,” “under review” or ”approved” statuses for an application
• a “beta” status of a page

When not to use this component

Do not use a badge to bring a user’s attention to important content.

Consider using a callout, critical alert or page alert instead.

Badge colours

If you’re using more than one status, consider using the “default light” and “default neutral light” badges along with the solid-coloured badges to distinguish the importance of the statuses.

Solid badges are more visible than the light badges. Use different colours to make the statuses more recognizable.

Example

---

System feedback badges

System feedback badges are used to represent the status of the system. Each colour is associated with a specific type of system feedback.

A red alert badge indicates an urgent or negative status, such as an error status.

A yellow warning badge cautions the user, such as an “experimental” or ”beta” status.

A green success badge indicates a positive or successful status, such as an “open” versus “closed” service location.

Do not overuse system feedback badges.

Placement

When placing a badge that is applicable to an entire page, place it near the top-left corner of the page.

Example

---

Badges can be placed under a heading to indicate the status of a section.

Example

---

Badges can be used in-line with a list of text.

Example

---

Best practices

Do:

• Use as few statuses as required. The more statuses there are, the harder it is for users to remember them.
• Consider using just one status. For instance, with an “online” or “offline” status, you may only need to show the online status.
• Use the same colour badge consistently for the same status.
• Write concise and direct labels. Only use more than one word if necessary.
• Use 15 characters or less in your badge label.

Don’t:

• Use contractions in a label.
• Use light badges on a non-white background.
• Use a badge in an alert.
• Make badges links — they should not be interactive.
• Include “Status:” before the tag. The status can stand on its own.

Technical specifications

Accessibility

Do not rely on colour alone to convey information — it’s not sufficient enough to meet accessibility standards. Support the meaning of the colour with relevant copy.

Do not change the colours of the badges. The badge colours already have the proper contrast ratio.

All-caps text is usually not recommended for text readability, but it works well with very short labels (one or two words in isolation) that need to stand out from other content.