# Status

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

## Elemente

- `sbb-status`: Displays a message to the user's attention.

## Übersicht

### Was macht die Komponente?
Ein Status zeigt den aktuellen Zustand eines Objekts, Prozesses oder Systems an. Er besteht aus Icon, optionalem Titel und kurzem Text. Die Farbe richtet sich nach dem Typ: Info, Success, Warning, Error, Pending, Incomplete, Not started oder In progress.

### Wann soll die Komponente eingesetzt werden?
* Um Nutzende über den aktuellen Zustand eines Prozesses, Systems oder Objekts zu informieren.

### Regeln.
* Verwende pro Zustand in der ganzen Anwendung immer denselben Typ.
* Halte den Text kurz.
* Für Screenreader: Der Text soll nur Inline-Inhalt enthalten. Bei dynamischen Änderungen kann `role="status"` gesetzt werden.

## Implementation (Web Components, Englisch)

The `<sbb-status>` is a component that has the purpose to show the user short messages to update the current status.
The status element displays a brief text message preceded by the status icon.

The `<sbb-status>` is structured in the following way:

- Icon: informs user about the current status type
- Title (optional): gives user an overview of the message
- Message: provide the information to the user

```html
<sbb-status>Status info text</sbb-status>
```

### Variants

The `<sbb-status>` supports eight types, based on the type of the information displayed:

- `info` (default)
- `success`
- `warn`
- `error`
- `pending`
- `incomplete`
- `not-started`
- `in-progress`

```html
<sbb-status type="info">...</sbb-status>
<sbb-status type="success">...</sbb-status>
<sbb-status type="warn">...</sbb-status>
<sbb-status type="error">...</sbb-status>
<sbb-status type="pending">...</sbb-status>
<sbb-status type="incomplete">...</sbb-status>
<sbb-status type="not-started">...</sbb-status>
<sbb-status type="in-progress">...</sbb-status>
```

### Title

An optional `<sbb-title>` can be slotted.

```html
<sbb-status>
  <sbb-title level="3">Title</sbb-title>
  Status info text
</sbb-status>
```

### Icon

The icon is primarily predefined and bound to the status.
However, it's possible to override this by using `iconName` property or `icon` slot.

### Style

The `<sbb-status>` use default message colors, based on the chosen `type`.

### Accessibility

The message text is wrapped into a `<p>` element to guarantee the semantic meaning.
Avoid slotting block elements (e.g. `<div>`) as this violates semantic rules and can have negative effects on screen-readers.

If needed, the `role="status"` attribute can be added on the component's tag.

```html
<sbb-status role="status" type="error">An error occurred.</sbb-status>
```

## API (Web Components, Englisch)

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