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:

badge-usage-construction — 1. Label, 2. Background

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.

badge-usage-types — 1. Primary button, 2. Ghost button

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.

badge-style-overview-button — Badge on a button

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

Usergroup: FancyUser User type: Global User mdsp:core:StandardUser Users 123 Failed
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.