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
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:
- Verify that the badge uses meaningful text to provide context or a status.
- 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.
- 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:
- Using a colour contrast analyser, enter the text colour and badge's background colour.
- 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