Introduction
Bottom sheets slide up from the bottom of the screen, offering a less disruptive alternative to full modals while still commanding focused attention. This guide covers when and how to use them effectively.
What Are Bottom Sheets
Bottom sheet: A panel that slides up from the bottom edge of the screen, partially or fully covering the underlying content, typically dismissible by swiping down or tapping outside.
Types of Bottom Sheets
- Fixed-height: Set height, doesn't expand
- Expandable: Peek height with drag-to-expand to full screen
- Modal bottom sheet: Blocks interaction with underlying content until dismissed
- Persistent bottom sheet: Stays partially visible, doesn't fully block interaction (e.g., music player mini-bar)
Use Cases
- Filter and sort options for lists/search results
- Quick action menus (share, save, delete)
- Short forms (add a comment, select an option)
- Preview content (map location details, product quick-view)
Bottom Sheets vs Modals
See our modals guide for comparison. Key difference: bottom sheets preserve spatial context (users see they're still "in" the same screen), making them feel less disruptive—ideal for secondary actions rather than critical decisions.
Design Best Practices
- Include a visible drag handle indicating it's interactive
- Support swipe-down-to-dismiss as the primary close gesture
- Keep peek height focused—show the most important content first
- Ensure tap-outside-to-dismiss works for non-critical sheets
Conclusion
Bottom sheets offer a mobile-native, less disruptive alternative to modals—ideal for filters, quick actions, and preview content. Use expandable sheets for content-rich use cases, and always support the swipe-to-dismiss gesture users expect.
Related Resources
Ready to implement bottom sheets in your app? AppStorys helps you deploy no-code UI patterns like bottom sheets. Book a demo.
