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 modifiers: info (by default), success, warning, error, purple, blue, turquoise, green and gray.

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.

  1. Have an outer div container to wrap the icon/button and the badge.
  2. Give position: relative to the outer div.
  3. Give position: absolute to the badge.
  4. Set the position to top: 8px and left: 24px.
  5. 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

component variations

Signal Info

Open on blank page
1
<div class="a-badge" role="status" aria-live="off">1</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">1456</div>

Signal Info extra large

Open on blank page
2667
<div class="a-badge -xl" role="status" aria-live="off">2667</div>

Signal Success

Open on blank page
1
<div class="a-badge -success" role="status" aria-live="off">1</div>

Signal Warning

Open on blank page
1
<div class="a-badge -warning" role="status" aria-live="off">1</div>

Signal Error

Open on blank page
1
<div class="a-badge -error" role="status" aria-live="off">1</div>

Highlight Purple

Open on blank page
1
<div class="a-badge -purple" role="status" aria-live="off">1</div>

Highlight Blue

Open on blank page
1
<div class="a-badge -blue" role="status" aria-live="off">1</div>

Highlight Turquoise

Open on blank page
1
<div class="a-badge -turquoise" role="status" aria-live="off">1</div>

Highlight Green

Open on blank page
1
<div class="a-badge -green" role="status" aria-live="off">1</div>

Highlight Gray

Open on blank page
1
<div class="a-badge -gray" role="status" aria-live="off">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">
  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">
  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">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">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: 0 0.25rem;
  background-color: var(--major-signal-neutral__enabled__fill__default);
  color: var(--major-signal-neutral__enabled__front__default);

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

  &.-xl {
    border-radius: 1rem;
    height: 2rem;
    line-height: 2rem;
    min-width: 2rem;
    padding-inline: 0.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);
      }
    }
  }
}