# Badge

Component of the SBB design system Lyne.

- Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Structure: one element
- Categories: Indicator
- Status: Design guidelines complete

## Links

- Page on digital.sbb.ch: https://digital.sbb.ch/en/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

## Elements


## Overview

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

## Implementation (web components)

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)

Full API tables (attributes, events, slots, CSS properties): https://digital.sbb.ch/en/design-system/lyne/components/badge/api.md