Vorschau.

Was macht die Komponente?

Ein Badge ist eine kleine Markierung an einem Element, zum Beispiel an einem Icon. Es zeigt eine kurze Information wie eine Anzahl und macht auf Neues oder Veränderungen aufmerksam.

Wann soll die Komponente eingesetzt werden?

• Um auf eine Anzahl hinzuweisen, zum Beispiel geänderte Filter oder ungelesene Nachrichten.
• Um auf einem Icon oder Button auf eine Veränderung aufmerksam zu machen.

Regeln.

• Ein Badge soll nur wenige Zeichen enthalten, in der Regel eine kurze Zahl.
• Ein Badge wird hauptsächlich auf einem Icon platziert.
• Die Bedeutung des Badges muss auch für Screenreader verfügbar sein, zum Beispiel über ein aria-label am Element.

Spezifikation.

The sbb-badge attribute can be applied to every element, but is mainly designed to be placed on an sbb-icon.

Usage.

Position default/after.

<sbb-icon
  name="controls-small"
  sbb-badge="2"
  aria-hidden="false"
  aria-label="Currently 2 settings changed."
></sbb-icon>

Position before.

<sbb-icon
  name="controls-small"
  sbb-badge="2"
  sbb-badge-position="before"
  aria-hidden="false"
  aria-label="Currently 2 settings changed."
></sbb-icon>

On img element.

<img> elements don't support pseudo-elements. Therefore, placing a badge directly on the <img> element is not possible.

As workaround, a figure element can be used:

<figure sbb-badge="5" class="sbb-figure">
  <img src="..." alt="Avatar Icon" />
</figure>

Accessibility.

For screen readers it's important to output the meaning of the badge. This attribute itself doesn't
output anything to screen readers. As an example, add aria-label text or aria-describedby references.

Moreover, we provide the Sass mixin badge which contains the badge styling for general usage.