Badges are small, styled UI items usually used with other elements. They can be used as a number count, to highlight a word or give context to an action needed.
Badge styles
Badges come in 2 different styles, Default and Pill. Each style has 8 colour options, the Reserved colours as well as 4 brand colours. In general, badges can be used to highlight that something requires attention.
Badges - Default
Badges - Pill
Usage examples
User experience
Default style badges are designed to highlight a word. The commonly seen usage is when indicating a function or feature in an application that is new or when onboarding.
Pill style badges are designed to highlight a number. The most common usage is to indicate the number of unread emails or messages that need to be addressed.
Badges are most effective at drawing attention when they appear and disappear as needed, or when the number they are highlighting changes. For example, in the ‘Unread emails’ scenario, when all the emails have been read the badge should no longer be visible. Or when being used to indicate a new feature, the label should hide once the feature is no longer new. This behaviour helps make them more prominent to a user when they do appear.
Used incorrectly or too often runs the risk that future uses of badges will be ignored.
Visual design
Badges inherit styles from the button and alert components which provides a wide range of colour options. They can be used alone, with text links or inside buttons. Unlike most components, badges are designed to be more prominent and attract attention.
Dos and don’ts
- Avoid using long text labels.
- Avoid using badges alone as buttons or links.