Please ensure to comply with the corporate identity. A detailed list what can be modified can be found here.

Badges

Use it for a number of functions, but mostly to demonstrate status and progress to the customer.

Basically they are positioned in the product tile or the tab bar.

Versions#

Standard	Addon
Use it alone or in conjunction with text.	Use it in the user-navigation of the tab bar.

If you decide to use a badge, never use more than a maximum of 2 variations.
Label the badge clearly with short, scannable text and keep the text as short as possible.

This badge is called standard it can be used alone or in conjunction with a text.
It comes in 2 different sizes depending of the corresponding text-styles.
The badge has 4 colored variations: primary, highlight, gray and info.

Types	Attributes	Preview
Primary	text-style: small or basic background-color: brand-primary-base
Highlight	text-style: small or basic background-color: danger-base
Gray	text-style: small or basic background-color: gray-base
Info	text-style: small or basic background-color: info-base

This badge is called addon and is only used in the user-navigation section of the tab bar.

Attributes	Preview
font-size: 10px line-height: 100% text-color: basic-white background-color: brand-primary-base

Types	Attributes	Preview
Horizontal spacing for small and basic badges	padding: 8px
Vertical spacing for small and basic badges	padding: 2px
Distances	margin: 8px

Types	Attributes	Preview
Horizontal spacing	padding: 4px
Size	16px
Position	Overlaps an icon by 50% to the right Text expands the element to the left

Override the text.
Adjust the width according to the text.
Modify badges to your project needs by changing colors of background, outline and text.

Doc: "Badge" | Clean up the documentation for the right structure and sentence case