In modern mobile design, managing screen real estate effectively is crucial. One of the most ubiquitous and effective tools for presenting contextual information or actions is the Bottom Sheet.
Unlike a traditional Modal, which often centers content and blocks a large portion of the view, a bottom sheet slides gracefully from the bottom edge of the viewport. This placement is strategically chosen because it is easily reachable by a user's thumb, enhancing usability on large smartphones.
Types of Bottom Sheets
Bottom sheets generally fall into two categories: Modal and Standard Sheet. The Modal type overlays the main content with a dark, semi-transparent backdrop and must be dismissed before the user can interact with the underlying content again. The Standard type is often used for Persistent UI elements, like a media player control strip, allowing simultaneous interaction with both the sheet and the app behind it.
Key Use Cases
- Action Menu: Presenting a list of contextual actions (e.g., Share, Save, Edit) for a selected item.
- Feature Explainer: Briefly introducing a new feature without forcing a full screen takeover.
- Settings Drawer: Providing quick access to common settings or filters.
To see how different elements are defined in this article, click on the highlighted terms above.