# Bottom-Sheet.

## Overview

### What does the component do?

- It dims the current view and puts a modal dialogue over it.

### When should the component be used?

- When the user’s attention is required.
- When information/input is required from the user.
- When related content is to be displayed.
- When additional content is to be displayed.
- The component is not suitable for error messages, warnings or similar notifications.

### Rules

- The user must always have the option of closing the modal dialogue.
- Any modal dialogue consists of a header (close icon and title) and content.
- The content must contain at least an interaction element (e.g. ‘save’ or ‘OK’).
- The modal dialogue cannot be used for error messages.
- The width and height of the dialogue is determined by the size of the content.
- A minimum space from the screen edge must be kept.
- The modal dialogue is closed if the dimmed section is clicked on.
- If the content is too big, a full-screen modal dialogue can be selected: see page types.

### Accessibility

- Content outside the open dialog should no longer be accessible via screen reader.

## Variants

### Variants

- With and without close button
- With and without back button

#### With close button and without back button

![Image of the modal view, With close button and without back button](https://digital.sbb.ch/assets/images/mobile/modal-default-light.webp "Modal view, With close button and without back button")

![Image of the modal view, With close button and without back button](https://digital.sbb.ch/assets/images/mobile/modal-default-dark.webp "Modal view, With close button and without back button")

#### With close and back button

![Image of the modal view, with close and back button](https://digital.sbb.ch/assets/images/mobile/modal-back-light.webp "Modal view, with close and back button")

![Image of the modal view, with close and back button](https://digital.sbb.ch/assets/images/mobile/modal-back-dark.webp "Modal view, with close and back button")

#### Without close and back button

![Image of the modal view, without close and back button](https://digital.sbb.ch/assets/images/mobile/modal-without-close-button-light.webp "Modal view, without close and back button")

![Image of the modal view, without close and back button](https://digital.sbb.ch/assets/images/mobile/modal-without-close-button-dark.webp "Modal view, without close and back button")

#### Without close button and wiht back button

![Image of the modal view, without close button and wiht back button](https://digital.sbb.ch/assets/images/mobile/modal-without-close-button-back-light.webp "Modal view, without close button and wiht back button")

![Image of the modal view, without close button and wiht back button](https://digital.sbb.ch/assets/images/mobile/modal-without-close-button-back-dark.webp "Modal view, without close button and wiht back button")

### Specification

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

---

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