Vorschau.

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.

Spezifikation.

Web Components.

Die Web Component ist im Paket @sbb-esta/lyne-elements enthalten.

Dokumentation.

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

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

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

Angular.

Diese Komponente gibt es auch für Angular im Paket @sbb-esta/lyne-angular.

class: SbbChipLabelElement, sbb-chip-label.

Properties.

Slots.