Overview
A Badge is used to convey short relevant information, such as a status, a notification, or a label. It is typically added supplementary to other components or text to indicate additional information.
When to use
- To reduce visual clutter and improve the ability to scan a section with lots of content.
- To present short complementary information, such as status or category.
When not to use
- To filter a category - use Chip / ChipGroup
- To display additional extensive or long text
Anatomy
- Container
- Text
Variants & States
Size
Size can be used to emphasize or deemphasize hierarchy. Our default size is the md size. Badge sizes do not change on different breakpoints and stay consistent.
Variant
Our badge types follow semantic color mapping.
Appearance
Badges have two distinct types of appearance - default and subtle. Decide on the correct appearance for your context, depending on how important the information is to the user.
Internationalization
For RTL (right-to-left) languages, there are no custom adjustments made.
Properties
| Name | Type | Values | Description |
|---|---|---|---|
| variant | String | neutralaccentsuccesswarningcritical |
|
| appearance | String | defaultsubtle |
|
| size | String | smmdlg |
Usage Guidelines
Content Guidelines
We’re using badges to display small, concise pieces of information. They’re great for highlighting a status, a count, or a brief label.
Voice and tone
We’re informative and straightforward with our tone.
Label
- We’re extremely brief. We use single words or very short phrases.
- We ensure the meaning is instantly understandable.
- We use sentence case (unless it’s a proper noun).
- We don’t use punctuation unless it’s part of a specific number format.
Accessibility
- We only use badges for small, non-interactive, supplemental pieces of information (like status counts or labels).
- Since a badge contains visible text, we don’t require alt text as long as the text clearly conveys its meaning. We ensure the visible text of the badge is announced correctly by the screen reader as part of the normal reading flow of the surrounding content.
- We ensure the information presented in the badge is repeated or non-essential, as badges may be overlooked if they interrupt the flow of the main content.
- If a badge shows an abbreviation, a truncated word, or a symbolic number (like “99+”), we write a short but clear description that explains what it means.