Preview.

What does the component do?

A chip label is a small, purely visual marker with short text, for example a filter name or a tag.

When should the component be used?

• To highlight a short piece of information or a category, for example "On sale".

Rules.

• The text is short and concise.
• The text is always on a single line.
• A chip label is not clickable.

Specification.

Web Components.

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

Documentation.

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.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

class: SbbChipLabelElement, sbb-chip-label.

Properties.

Slots.