# Status

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

## Elements

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

## Overview

### What does the component do?
A status shows the current state of an object, process or system. It consists of an icon, an optional title and a short text. The colour depends on the type: info, success, warning, error, pending, incomplete, not started or in progress.

### When should the component be used?
* To inform users about the current state of a process, system or object.

### Rules.
* Always use the same type for the same state, throughout the application.
* Keep the text short.
* For screen readers: the text should only contain inline content. For dynamic changes, `role="status"` can be set.

## Implementation (web components)

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)

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