badge

Badges are used to highlight the characteristics of an object, such as the number of unread messages.

The content (rendered as a string) within the badge can be:

Text
Number (no more than three digits recommended)

It comes with nine color modifiers: info (by default), success, warning, error, purple, blue, turquoise, green and gray.

It comes with one modifier for the use-case when there is only one letter inside the badge. Therefore the -single-char class or the data attribute data-count="1" can be applied.

Two use-cases are possible for the badge:

attached to an icon/button
as inline badge right next to text

How to use

It's up to the user how to position the badge relatively to the icon/button.

As an example, the following steps were taken in the demo below.

Have an outer div container to wrap the icon/button and the badge.
Give position: relative to the outer div.
Give position: absolute to the badge.
Set the position to top: 8px and left: 24px.
To use the variant small, set the position to top: 4px and left: 32px.

When positioning the badge relatively to the icon/button, it is important to use the aria-label of the icon/button to describe the content of the badge, e.g. use the label of badge.

In a live context using the badge, it is highly recommended to switch its aria-live attribute to "polite".

More information can be found here.

table of content

description
component variations
style scss

component variations

Signal Info

Open on blank page

1

<div class="a-badge" role="status" aria-live="off" data-count="1">1</div>

Signal Info empty

Open on blank page

<div class="a-badge" role="status" aria-live="off" data-count="0"></div>

Signal Info small

Open on blank page

345

<div class="a-badge -s" role="status" aria-live="off">
  <span class="a-badge-dot"></span>
  <span class="a-badge-label">345</span>
</div>

Signal Info small label left

Open on blank page

345

<div class="a-badge -s -left" role="status" aria-live="off">
  <span class="a-badge-dot"></span>
  <span class="a-badge-label">345</span>
</div>

Signal Info large

Open on blank page

1456

<div class="a-badge -l" role="status" aria-live="off" data-count="4">1456</div>

Signal Info large single char

Open on blank page

W

<div
  class="a-badge -l -single-char"
  role="status"
  aria-live="off"
  data-count="1"
>
  W
</div>

Signal Info extra large

Open on blank page

2667

<div class="a-badge -xl" role="status" aria-live="off" data-count="4">2667</div>

Signal Info extra large single char

Open on blank page

W

<div
  class="a-badge -xl -single-char"
  role="status"
  aria-live="off"
  data-count="1"
>
  W
</div>

Signal Success

Open on blank page

1

<div class="a-badge -success" role="status" aria-live="off" data-count="1">
  1
</div>

Signal Warning

Open on blank page

1

<div class="a-badge -warning" role="status" aria-live="off" data-count="1">
  1
</div>

Signal Error

Open on blank page

1

<div class="a-badge -error" role="status" aria-live="off" data-count="1">1</div>

Highlight Purple

Open on blank page

1

<div class="a-badge -purple" role="status" aria-live="off" data-count="1">
  1
</div>

Highlight Blue

Open on blank page

1

<div class="a-badge -blue" role="status" aria-live="off" data-count="1">1</div>

Highlight Turquoise

Open on blank page

1

<div class="a-badge -turquoise" role="status" aria-live="off" data-count="1">
  1
</div>

Highlight Green

Open on blank page

1

<div class="a-badge -green" role="status" aria-live="off" data-count="1">1</div>

Highlight Gray

Open on blank page

1

<div class="a-badge -gray" role="status" aria-live="off" data-count="1">1</div>

Long label

Open on blank page

A badge with an unlimited label text lorem ipsum

<div class="a-badge" role="status" aria-live="off" data-count="48">
  A badge with an unlimited label text lorem ipsum
</div>

Long label large

Open on blank page

A badge with an unlimited label text lorem ipsum

<div class="a-badge -l" role="status" aria-live="off" data-count="48">
  A badge with an unlimited label text lorem ipsum
</div>

Badge on a Integrated Button

Open on blank page

999+

<style>
  .badge-icon-example {
    display: inline-block;
    position: relative;
  }

  .badge-icon-example .a-badge {
    position: absolute;
    top: 8px;
    left: 24px;
  }
</style>
<div class="badge-icon-example">
  <button
    type="button"
    class="a-button a-button--integrated -without-label"
    aria-label="999+"
  >
    <i class="a-icon a-button__icon boschicon-bosch-ic-emoji-happy"></i>
  </button>
  <div class="a-badge" role="status" aria-live="off" data-count="4">999+</div>
</div>

Badge small on a Integrated Button

Open on blank page

<style>
  .badge-small-icon-example {
    display: inline-block;
    position: relative;
  }

  .badge-small-icon-example .a-badge {
    position: absolute;
    top: 4px;
    left: 32px;
  }
</style>
<div class="badge-small-icon-example">
  <button
    type="button"
    class="a-button a-button--integrated -without-label"
    aria-label="emoji-happy"
  >
    <i class="a-icon a-button__icon boschicon-bosch-ic-emoji-happy"></i>
  </button>
  <div class="a-badge -s" role="status" aria-live="off">
    <span class="a-badge-dot"></span>
  </div>
</div>

inline Badge

Open on blank page

Lorem ipsum dolor sit amet.

lorem ipsum

<style>
  .badge-inline-example {
    display: flex;
    align-items: center;
  }
</style>
<div class="badge-inline-example">
  <span>Lorem ipsum dolor sit amet.</span>
  <div class="a-badge" role="status" aria-live="off" data-count="11">
    lorem ipsum
  </div>
</div>

additional content

styles SCSS

.a-badge {
  align-items: center;
  border-radius: 0.5rem;
  display: inline-flex;
  font-size: 0.75rem;
  height: 1rem;
  justify-content: center;
  line-height: 1rem;
  min-width: 1rem;
  padding-inline: 0.25rem;
  background-color: var(--major-signal-neutral__enabled__fill__default);
  color: var(--major-signal-neutral__enabled__front__default);

  &[data-count="1"],
  &.-single-char {
    padding-inline: .125rem;
  }

  &.-l {
    border-radius: 0.75rem;
    height: 1.5rem;
    line-height: 1.5rem;
    min-width: 1.5rem;
    padding-inline: 0.5rem;

    &[data-count="1"],
    &.-single-char {
      padding-inline: .25rem;
    }
  }

  &.-xl {
    border-radius: 1rem;
    height: 2rem;
    line-height: 2rem;
    min-width: 2rem;
    font-size: 1rem;
    /* adapted padding, see ticket FROK-696 */
    padding-inline: .69rem;

    &[data-count="1"],
    &.-single-char {
      padding-inline: .5rem;
    }
  }

  &.-success {
    background-color: var(--major-signal-success__enabled__fill__default);
    color: var(--major-signal-success__enabled__front__default);
  }

  &.-warning {
    background-color: var(--major-signal-warning__enabled__fill__default);
    color: var(--major-signal-warning__enabled__front__default);
  }

  &.-error {
    background-color: var(--major-signal-error__enabled__fill__default);
    color: var(--major-signal-error__enabled__front__default);
  }

  &.-purple {
    background-color: var(--major-highlight-purple__enabled__fill__default);
    color: var(--major-highlight-purple__enabled__front__default);
  }

  &.-blue {
    background-color: var(--major-highlight-blue__enabled__fill__default);
    color: var(--major-highlight-blue__enabled__front__default);
  }

  &.-turquoise {
    background-color: var(--major-highlight-turquoise__enabled__fill__default);
    color: var(--major-highlight-turquoise__enabled__front__default);
  }

  &.-green {
    background-color: var(--major-highlight-green__enabled__fill__default);
    color: var(--major-highlight-green__enabled__front__default);
  }

  &.-gray {
    background-color: var(--small__enabled__fill__default);
    color: var(--small__enabled__front__default);
  }

  &.-s {
    border-radius: 0;
    height: 1rem;
    min-width: auto;
    padding: 0;
    background-color: unset;
    color: var(--plain__enabled__front__default);

    .a-badge-dot {
      border-radius: 0.25rem;
      height: 0.5rem;
      width: 0.5rem;
      background-color: var(--major-signal-neutral__enabled__fill__default);
    }

    .a-badge-label {
      padding-inline: 0.25rem 0;
    }

    &.-left {
      flex-direction: row-reverse;

      .a-badge-label {
        padding-inline: 0 0.25rem;
      }
    }

    &.-success {
      .a-badge-dot {
        background-color: var(--major-signal-success__enabled__fill__default);
      }
    }

    &.-warning {
      .a-badge-dot {
        background-color: var(--major-signal-warning__enabled__fill__default);
      }
    }

    &.-error {
      .a-badge-dot {
        background-color: var(--major-signal-error__enabled__fill__default);
      }
    }

    &.-purple {
      .a-badge-dot {
        background-color: var(--major-highlight-purple__enabled__fill__default);
      }
    }

    &.-blue {
      .a-badge-dot {
        background-color: var(--major-highlight-blue__enabled__fill__default);
      }
    }

    &.-turquoise {
      .a-badge-dot {
        background-color: var(--major-highlight-turquoise__enabled__fill__default);
      }
    }

    &.-green {
      .a-badge-dot {
        background-color: var(--major-highlight-green__enabled__fill__default);
      }
    }

    &.-gray {
      .a-badge-dot {
        background-color: var(--small__enabled__fill__default);
      }
    }
  }
}