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.
Types
There are the following badge types:
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 MindSphere 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.
To use 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 used in the component:
| Name | State | Property | Color name |
|---|---|---|---|
| Badge | – | Background color | can appear in every color |
| Label dark | – | Foreground color | Gray 800 |
| Label light | – | 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 used in the component:
| 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:
