# Message

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

## Elements

- `sbb-message`: It displays a complex message combining a title, an image, an action and some content.

## Overview

### What does the component do?
A message shows a notice within the page layout, e.g. a hint, an error or an empty state. It consists of a title and, optionally, a subtitle, an image, an error code and an action. Unlike a [notification](https://digital.sbb.ch/en/design-system/lyne/components/notification/), it has no type and cannot hide itself.

### When should the component be used?
* For messages that are part of the content, e.g. in empty lists or when content fails to load.
* When the message should attract less attention than an [alert](https://digital.sbb.ch/en/design-system/lyne/components/alert/) or notification.

### Rules.
* The message is integrated into the layout and is not positioned like an alert or notification.
* Title and text state clearly what happened and what users can do.
* An action (e.g. "Try again") is optional.

## Implementation (web components)

The `<sbb-message>` component can be used to display a complex message.

### Slots

The title slot should be used to slot a `<sbb-title>` element.
Optionally, the user can provide other elements such as a subtitle paragraph via the `subtitle` slot,
a [sbb-image](https://lyne-elements.app.sbb.ch/?path=/docs/elements-image--docs) to provide an image via the `image` slot,
a paragraph to provide an error code via the `legend` slot,
and a [sbb-button](https://lyne-elements.app.sbb.ch/?path=/docs/elements-button--docs) to provide a custom action via the `action` slot.

```html
<sbb-message>
  <sbb-image slot="image" [...]></sbb-image>
  <sbb-title slot="title" level="3">Title</sbb-title>
  <p slot="subtitle">Subtitle</p>
  <p slot="legend">Error code: 0001</p>
  <sbb-button slot="action" [...]>Action</sbb-button>
</sbb-message>
```

## API (web components)

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