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.

Types

There are the following badge types:

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

To use a functional color as background color emphasizes the severity of a badge. For more information see chapter Color.

badge-style-color
1. Context related colors, 2. Functional colors

The following table gives reference to the different colors and shades used in the component:

Name State Property Color name
Badge Background color can appear in every color
Label dark Foreground color Gray 800
Label light Foreground color White
On a button contextual Background color can appear in every color

Typography

The following table gives reference to the different font sizes and weights used in the component:

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