The responsive bottom sheet component is a modal-style element that slides up from the bottom of the screen in mobile views and appears as a modal in larger views.
Bottom sheet
View this component using the demo button to see how it responds across views.
User experience
This component was developed as a web version of a UI element typically associated with native experiences, such as iOS's 'ActionSheet' and Android's 'BottomSheet.' While these native components are designed for mobile experiences, our responsive Design System requires a web version that could adapt for larger devices, where the bottom sheet interaction is less effective.
The Bottom sheet component appears as an overlay and behaves in a similar way to a modal, it requires the user to interact with it or dismiss it. It blocks any interaction with the background content while it is visible.
Where it differs to a modal is when it is viewed on a touch device, it can be dismissed via a swipe.
Visual design
The Bottom sheet is a generic component designed to work in as many scenarios as possible. It can be configured to accommodate most functional requirements.
Where is this available?
The GEL design System will always have the latest component versions and additions, however new components and changes to existing components may roll out to other platforms at different times.
| Platform | Status |
|---|---|
| GEL Design System | Available |
| Mesh UI | Older version available - Upgrade in backlog |
| Legacy WDP | Older version available |