# Badge

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: ein Element
- Kategorien: Indicator
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/design-system/lyne/components/badge/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-badge--docs
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-14
- GitHub: https://github.com/sbb-design-systems/lyne-components

## Elemente


## Übersicht

### 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.

## Implementation (Web Components, Englisch)

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

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

#### Position before

```html
<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:

```html
<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.

## API (Web Components, Englisch)

Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/badge/api.md