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:

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:

badge-style-sizing
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