Badge

A badge, also known as a label or tag,
is used to provide additional information
or context about an item in the UI.

Badges can also be used to tag content and show it belongs to a specific category.

It displays a word or short phrase that communicates its status, feature or category.

  • Use a badge on it's own to indicate if a piece of content is 'new' or to show a category on an article (for example on a blog post, to indicate that it is in the category 'cost-saving').
  • Use badges to indicate that something can have more than one status (for example to show whether an item in a table has been completed). See external links below for more information.
  • Don't use a badge to describe multiple elements or categories.
  • Don't use a badge as a small button. Badges are not interactive.

Live example

Storybook failed to load. Please connect to the VPN to access.

Availabile platforms

Platform

Available

Figma

v1+

Web (@ovotech/element)

v1+

App (@ovotech/element-native)

v1+


How to use it

Label

This should be supporting information, not primary. Keep it short.

Semantic

Badges are themed semantically in consumer products:

  • Info
  • Success
  • Warning
  • Error

Hues

In back-of-house products, sometimes colour-coded badges can be used to communicate status from a long list of options. For this use-case, it's also possible to use a hue directly:

  • Neutral
  • Red
  • Orange
  • Yellow
  • Green
  • Blue

Inverted

When additional options are needed for statuses in complex back-of-house products, badges can also be inverted.


Properties

These are the properties for anyone implementing this component and code.

Name

Values

Default

variant

default success error warning info neutral red orange yellow green blue

info

inverted

true false

false

customVariant

Obj: { backgroundColor: string, foregroundColor: string }

null

...

JSX/IntrinsicElements["span"]

 


Checking for accessibility

User stories

The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.

  • As someone using the component, I want to be able to easily understand the context provided by use of the badge component, without having to read through all the related information.
  • As a screen reader user, I want to be able to understand the status of my application, without having to read through all the related information.

Test steps

Use these steps to check that the badge component has been implemented correctly:

  1. Verify that the badge uses meaningful text to provide context or a status.
  2. Verify that information is not conveyed through the use of the colour of the badge alone, and that there is a text alternative provided for any information conveyed by colour.
  3. Verify that when announced, the badge follows the content that it relates, with the order ensuring that the meaning of the content makes sense.

If using a custom variant, complete the following checks:

  1. Using a colour contrast analyser, enter the text colour and badge's background colour.
  2. Verify that the colour have a colour contrast ratio of at least 4.5:1.

Avoiding accessibility barriers

We're aware of the following barriers that can be introduced when using this component. Ensure that you are not adding barriers, by considering the following:

  • When using the semantic colours for this component, with the colour conveying meaning, ensure that a text alternative is provided. For example, if there is an error with a user's account, don't rely on the red colour of the badge to convey that there's a problem. People who cannot perceive colour, or differences in colour, may be unaware that there is an error. Instead, to prevent any issues, ensure that the information conveyed by the use of colour is in the label. For example: "Success, Form submitted", "Error, information unavailable".

External links

 

Gov.uk Tags