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

badge-usage-do-dont

  • 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

1. Badges with light labels, 2. Badges with dark labels

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:

NameStateFont-familyFont-sizeLine-heightText-align
LabelallSiemens Sans Bold12px16pxcenter

Sizing and spacing

The following measurements show the dimensions for this component:

badge-style-sizing

Sizing and spacing for a badge

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

ElementClassDescription
.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.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top