Preview.

What does the component do?

A badge is a small marker attached to an element, for example an icon. It shows brief information such as a count and draws attention to new items or changes.

When should the component be used?

• To indicate a count, for example changed filters or unread messages.
• To draw attention to a change on an icon or button.

Rules.

• A badge should contain only a few characters, usually a short number.
• A badge is mainly placed on an icon.
• The meaning of the badge must also be available to screen readers, for example via an aria-label on the element.

Specification.

Web Components.

The web component is in the package @sbb-esta/lyne-elements.

Documentation.

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.