# Chip-Label

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

## Elements

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

## Overview

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

## Implementation (web components)

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)

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