# Notification-Box.

## Overview

### What does the component do?

- Display of important information.

### When should the component be used?

- For information on the status of the application.
- When technical errors occur.

### Rules

- The notification box can be closed once and no longer appears.cheint nicht mehr.
- Text has a maximum of 3 lines, additional information is displayed in a bottom sheet.

## Variants

### States

The component has the following states:

- Alert
- Warning
- Success
- Information

### Variants

The component has the following variants:

- Title: Optional
- Close-Button: Optional
- Detail-Link: Optional
- Interaction: Optional

#### Notification-Box with Titel

![Notificaton-Box, with Titel](https://digital.sbb.ch/assets/images/mobile/notification-default-with-title-light.webp "Notificaton-Box, with Titel")

![Notificaton-Box, with Titel](https://digital.sbb.ch/assets/images/mobile/notification-default-with-title-dark.webp "Notificaton-Box, with Titel")

#### Notification-Box without Titel

![Notificaton-Box without Titel](https://digital.sbb.ch/assets/images/mobile/notification-default-without-title-light.webp "Notificaton-Box without Titel")

![Notificaton-Box without Titel](https://digital.sbb.ch/assets/images/mobile/notification-default-without-title-dark.webp "Notificaton-Box without Titel")

#### Notification-Box with Interaction and Title

![Notification-Box, mit Titel](https://digital.sbb.ch/assets/images/mobile/notification-interaction-with-title-light.webp "Notification-Box, mit Titel")

![Notification-Box, mit Titel](https://digital.sbb.ch/assets/images/mobile/notification-interaction-with-title-dark.webp "Notification-Box, mit Titel")

#### Notification-Box with Interaction without Title

![Notification-Box, ohne Titel](https://digital.sbb.ch/assets/images/mobile/notification-interaction-without-title-light.webp "Notification-Box, ohne Titel")

![Notification-Box, ohne Titel](https://digital.sbb.ch/assets/images/mobile/notification-interaction-without-title-dark.webp "Notification-Box, ohne Titel")

### Spezifikationen

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

---

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