Badge
A badge indicates a status information from the system. It is used to highlight a numerical characteristic or mark an item.
Usage
When to use
Use a badge in the following cases:
- When an element needs to be highlighted.
- When items need to be differentiated from each other.
General construction
A badge consists of the following elements:
1. Label
- If possible, try not to use more than three words.
- Only the first word of the label should be capitalized.
- A badge label can have additional information such as the category or type of a badge.
2. Background
- The background color is contextual.
- The background color can be used to emphasize a status, to inform or to associate information.
Options
The following badge options are available:
Badge as counter
A badge can be placed within a button or other items to be used as a counter.
Behavior
A badge has no interaction. It is not clickable or removable.
Do’s & Don’ts
- If possible, try not to use more than three words.
- Do not use too long labels or whole sentences.
Style
This chapter shows several badge styles in the design system.
Overview
A badge can have a light or a dark label.
Color
A badge can have every background color. For better contrast and visibility, use a dark label on brighter backgrounds and a light label on darker backgrounds.
A functional color as background color emphasizes the severity of a badge. For more information see chapter Color.
The following table gives reference to the different colors and shades:
| Name | State | Property | Color name |
|---|---|---|---|
| Badge | all | Background color | can appear in every color |
| Label dark | all | Foreground color | Gray 800 |
| Label light | all | Foreground color | White |
| On a button | contextual | Background color | can appear in every color |
Typography
The following table gives reference to the different font sizes and weights:
| Name | State | Font-family | Font-size | Line-height | Text-align |
|---|---|---|---|---|---|
| Label | all | Siemens Sans Bold | 12px | 16px | center |
Sizing and spacing
The following measurements show the dimensions for this component:
