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.
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:
Badges have two default styles and can be customized with the available CSS helper classes.
Badge
Primary link button, disabled 321
<span class="badge badge--dark">
Usergroup: FancyUser
</span>
<span class="badge badge--light">
User type: Global User
</span>
<span class="badge has-bgColor-accentBlueLight has-color-snow">
mdsp:core:StandardUser
</span>
<span class="badge has-bgColor-warning has-color-accentGreenDark">
Users
</span>
<span class="badge has-bgColor-base900 has-color-success">
123
</span>
<span class="badge has-color-error has-bgColor-error-lighter">
Failed
</span>
<br>
<button class="button--primary">
Primary button
<span class="badge badge--dark">
123
</span>
</button>
<a class="button button--primary is-disabled" href="#">
Primary link button, disabled
<span class="badge has-bgColor-warning has-color-accentGreenDark">
321
</span>
</a>
<button class="button--secondary">
Secondary button
<span class="badge has-bgColor-primary has-color-snow">
Category
</span>
</button>
Usage
Element | Class | Description |
---|---|---|
.badge | .badge--dark | Default styling for badge element: background color in dark gray with white foreground color. |
.badge | .badge--light | Alternative styling for badge element: background color in light gray with gray foreground color. |
.badge | .has-color-<color name> | Applies a customized foreground color to the badge element for special requirements. Any of the foreground color helper classes can be used. |
.badge | .has-bgColor-<color name> | Applies a customized background color to the badge element for special requirements. Any of the background color helper classes can be used. |