Badge new

The badge is a utility component used to display a status, notification, item count, or contextual metadata. They are typically placed on the ending edge of icons or nested within other components.

• Design: Figma Component
• Used inside: CircularIcons

Examples

Default Badge

The base class for rendering a standard badge: .c-badge

Size Modifiers

Add the following classes to change the size of the badge ("s" is the default size):
.-xs, .-s, .-md, .-lg

Show Code

<div class="h-flex h-flex-row gap-s">
  <span class="c-badge -xs">
  </span>
  <span class="c-badge -s">
  </span>
  <span class="c-badge -md">
  </span>
  <span class="c-badge -lg">
  </span>
</div>

Color Modifiers

Add the following classes to change the state of the badge:
.-success, .-warning, .-error, -notice

2 99+

Show Code

<div class="h-flex h-flex-row gap-s">
  <span class="c-badge -error">
    2
  </span>
  <span class="c-badge -warning">
    99+
  </span>
  <span class="c-badge -success">
  </span>
  <span class="c-badge -notice">
  </span>
</div>

Special Color Modifiers

• Used in Gefahrstoffetikett

Add the following classes to use special colors:
.-kennzeichnung-rot, .-kennzeichnung-orange, .-kennzeichnung-gelb, .-kennzeichnung-blau

Show Code

<div class="h-flex h-flex-row gap-s">
  <span class="c-badge -kennzeichnung-rot">
  </span>
  <span class="c-badge -kennzeichnung-orange">
  </span>
    <span class="c-badge -kennzeichnung-gelb">
  </span>
    <span class="c-badge -kennzeichnung-blau">
  </span>
</div>