# Message.

## Overview

### What does the component do?

- Display of messages.

### When should the component be used?

- For information on the status of the application.
- When technical errors occur.
- When carrying out longer-lasting actions.

### Rules

- Field validations (e.g. for the [text input](https://digital.sbb.ch/en/design-system/mobile/components/text-input/)) are used for incorrect entries.
- If the illustration is used by SBB employees, a woman or a man is shown at random.

## Variants

### States

The component has the following states:

- Default
- Error
- Loading

### Variants

The component has the following variants:

- Illustration: Optional
- Error Code: Optional
- Retry-Button: Optional

#### Message with illustration

![Message, with illustration](https://digital.sbb.ch/assets/images/mobile/message-with-illustration-light.webp "Message, with illustration")

![Message, with illustration](https://digital.sbb.ch/assets/images/mobile/message-with-illustration-dark.webp "Message, with illustration")

#### Message without illustration

![Message, without illustration](https://digital.sbb.ch/assets/images/mobile/message-without-illustration-light.webp "Message, without illustration")

![Message, without illustration](https://digital.sbb.ch/assets/images/mobile/message-without-illustration-dark.webp "Message, without illustration")

### Spezifikationen

[Design](https://www.figma.com/design/ZBotr4yqcEKqqVEJTQfSUa/Design-System-Mobile?node-id=284-3296&t=OQ7s4wE6eWI2fLGh-1)

---

Source: https://digital.sbb.ch/en/design-system/mobile/components/message/