# Bottom-Sheet.

## Übersicht

### Was macht die Komponente?

- Dunkelt den aktuellen View ab und legt einen modalen Dialog darüber.

### Wann soll die Komponente eingesetzt werden?

- Wenn die Aufmerksamkeit des Benutzer benötigt wird.
- Wenn vom Benutzer eine Information/Input verlangt wird.
- Wenn verwandter Inhalt dargestellt werden soll.
- Wenn zusätzlicher Inhalt dargestellt werden soll.
- Wenn eine Fehlermeldung angezeigt werden soll.

### Regeln

- Der Benutzer muss immer die Möglichkeit haben den modalen Dialog zu schliessen.
- Jeder modale Dialog besteht aus einem Header (Schliessen-Icon und Titel) und Inhalt.
- Die Höhe des Dialogs wird durch die Grösse des Inhalts bestimmt.
- Ein Mindestabstand zum Bildschirmrand ist zu gewährleisten.
- Bei Klick auf den abgedunkelten Bereich wird der modale Dialog geschlossen.

### Barrierefreiheit

- Inhalte ausserhalb des geöffneten Dialogs sollen per Screen Reader nicht mehr erreichbar sein.

## Varianten

### Varianten

- Mit und ohne Close-Button
- Mit und ohne Back-Button

#### Mit Close Button ohne Back Button

![Darstellung eines modalen Dialogs mit Close Button, ohne Back Button](https://digital.sbb.ch/assets/images/mobile/modal-default-light.webp "Modaler Dialog mit Close Button, ohne Back Button")

![Darstellung eines modalen Dialogs mit Close Button, ohne Back Button](https://digital.sbb.ch/assets/images/mobile/modal-default-dark.webp "Modaler Dialog mit Close Button, ohne Back Button")

#### Mit Close und Back Button

![Darstellung eines modalen Dialogs mit Close Button und Back Button](https://digital.sbb.ch/assets/images/mobile/modal-back-light.webp "Modaler Dialog mit Close Button und Back Button")

![Darstellung eines modalen Dialogs mit Close Button und Back Button](https://digital.sbb.ch/assets/images/mobile/modal-back-dark.webp "Modaler Dialog mit Close Button und Back Button")

#### Ohne Close und Back Button

![Darstellung eines modalen Dialogs ohne Close Button und Back Button](https://digital.sbb.ch/assets/images/mobile/modal-without-close-button-light.webp "Modaler Dialog ohne Close Button und Back Button")

![Darstellung eines modalen Dialogs ohne Close Button und Back Button](https://digital.sbb.ch/assets/images/mobile/modal-without-close-button-dark.webp "Modaler Dialog ohne Close Button und Back Button")

#### Ohne Close Button und mit Back Button

![Darstellung eines modalen Dialogs ohne Close Button, mit Back Button](https://digital.sbb.ch/assets/images/mobile/modal-without-close-button-back-light.webp "Modaler Dialog ohne Close Button, mit Back Button")

![Darstellung eines modalen Dialogs ohne Close Button, mit Back Button](https://digital.sbb.ch/assets/images/mobile/modal-without-close-button-back-dark.webp "Modaler Dialog ohne Close Button, mit Back Button")

### Spezifikationen

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

---

Source: https://digital.sbb.ch/de/design-system/mobile/components/bottom-sheet/