In Web & Mobile Design
What is a Bottom Sheet?
A bottom sheet is a modal or persistent surface that slides up from the bottom to show contextual actions or content.
When to use Bottom Sheets?
- Secondary tasks that should not take over the entire screen
- Mobile UIs where reachability mattersWhen not to use Bottom Sheets? - For critical flows that require full-screen focusWhat is the anatomy of Bottom Sheets?
- Drag handle and scrim
- Peek, half, and full-height states
- Safe areas and keyboard avoidance