A badge indicates a status information from the system. It is used to highlight a numerical characteristic or mark an item.


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, 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.


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.

1. Primary button, 2. Ghost button


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.


This chapter shows several badge styles in the design system.


A badge can have a light or a dark label.

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

Badge on a button


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 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:

Sizing and spacing for a badge

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top