# Notification-Box.

## Übersicht

### Was macht die Komponente?

- Anzeige von wichtigen Informationen.

### Wann soll die Komponente eingesetzt werden?

- Bei Informationen zum Status der Applikation.
- Beim Auftreten von technischen oder fachlichen Fehlern.

### Regeln

- Die Notification-Box lässt sich einmal schliessen und erscheint nicht mehr.
- Text hat maximal 3 Zeilen, zusätzliche Informationen werden in einem Bottom-Sheet angezeigt.

## Varianten

### Zustände

Die Komponente hat folgende Zustände:

- Alert
- Warning
- Success
- Information

### Varianten

Die Komponente hat folgende Varianten:

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

#### Notification-Box mit Titel

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

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

#### Notification-Box ohne Titel

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

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

#### Notification-Box mit Interaktion und Titel

![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 mit Interaktion ohne Titel

![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/de/design-system/mobile/components/notification-box/