# Chip-Label

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/chip-label/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-chip-label--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/chip-label/overview (API: https://lyne-angular.app.sbb.ch/angular/components/chip-label/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-22
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/chip-label

## Elemente

- `sbb-chip-label`: It displays brief and compact information.

## Übersicht

### Was macht die Komponente?
Ein Chip-Label ist eine kleine, rein visuelle Markierung mit kurzem Text, zum Beispiel ein Filtername oder ein Tag.

### Wann soll die Komponente eingesetzt werden?
* Um eine kurze Information oder Kategorie hervorzuheben, zum Beispiel «Angebot».

### Regeln.
* Der Text ist kurz und prägnant.
* Der Text steht immer in einer Zeile.
* Ein Chip-Label ist nicht klickbar.

## Implementation (Web Components, Englisch)

The `<sbb-chip-label>` is a visual component used to display compact information, like a filter's name or a tag.

```html
<sbb-chip-label>On sale</sbb-chip-label>
```

### Style

It's possible to choose among different values for the `size` property (`xxxs`, `xxs` (default), `xs`, and `s`),
and four different values for the `color` property (`charcoal`, `granite`, `white` and `milk`, which is the default).

```html
<sbb-chip-label color="charcoal" size="s">Label</sbb-chip-label>

<sbb-chip-label color="granite" size="xs">Label</sbb-chip-label>

<sbb-chip-label color="white">Label</sbb-chip-label>
```

## API (Web Components, Englisch)

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