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.