Modal Bottom Sheet

Modal bottom sheets are overlay panels that slide up from the screen bottom, presenting content or actions while maintaining context of the underlying screen. Both iOS and Android support bottom sheets with platform-specific conventions. Design systems must specify bottom sheet behavior, sizing, and interaction patterns for cross-platform consistency.

What Are Modal Bottom Sheets

Modal bottom sheets present secondary content or actions in a container anchored to the screen bottom. Users can interact with sheet content or dismiss the sheet to return to the main content. Sheets provide more space than action sheets while being less disruptive than full-screen modals.

iOS implemented sheet presentations with configurable detents starting in iOS 15. UISheetPresentationController provides standard bottom sheet behavior with customizable height stops.

Android bottom sheets are part of Material Design, available through BottomSheetBehavior and BottomSheetDialogFragment. Material bottom sheets support dragging between collapsed, expanded, and hidden states.

Both platforms support swipe-to-dismiss gestures, making sheets feel like lightweight overlays rather than committed modal contexts.

How Modal Bottom Sheets Work

iOS sheet presentation uses detents to define allowed heights. Common detents include medium (approximately half screen) and large (near full screen). Sheets can be locked to specific detents or allow dragging between them.

Bottom Sheet Patterns:

iOS Sheet Presentation (iOS 15+):
- Detents: .medium(), .large(), custom heights
- Dragging between detents
- Swipe down to dismiss
- Dimmed background (configurable)
- Grabber indicator at top

Android Bottom Sheet:
- States: COLLAPSED, EXPANDED, HIDDEN
- Peek height defines collapsed state
- Draggable between states
- Modal or standard variants
- Rounded top corners typical

Common Behaviors:
- Content scrolling within sheet
- Fixed header with scrolling content
- Action buttons at sheet bottom
- Swipe down dismissal
- Background tap dismissal (optional)
- Keyboard interaction for forms

Design Considerations:
- Height relative to content
- Backdrop dimming level
- Drag indicator visibility
- Animation timing and easing
- Safe area handling at bottom

Content organization within sheets follows patterns. Headers remain fixed while content scrolls. Action buttons often anchor at the bottom. Scrolling indicators help users understand when more content exists.

Interaction patterns include swipe gestures, tap outside to dismiss, and explicit close buttons. Sheets with forms must handle keyboard appearance, adjusting sheet height to keep inputs visible.

Sheet lifecycle affects underlying content. The presenting screen may dim, remain interactive, or become fully blocked depending on sheet configuration and design system specification.

Key Considerations

• Height selection should accommodate content without overwhelming
• Swipe dismissal thresholds affect ease of dismissal
• Keyboard handling requires careful attention for form sheets
• Scrolling content needs clear scroll indicators
• Safe areas affect bottom-positioned elements
• Animation timing should feel responsive not sluggish

Common Questions

When should applications use bottom sheets versus other modals?

Bottom sheets suit contextual actions and short flows. Selecting options, viewing details, or completing brief forms work well in bottom sheets.

Full-screen modals suit focused tasks requiring significant attention. Multi-step flows, complex forms, or content requiring full context benefit from full-screen presentation.

Action sheets (iOS) or bottom sheets with limited options suit simple choice selection. Three to five actions presenting a quick choice need not fill a large bottom sheet.

Popovers suit quick selections anchored to specific elements on larger screens. iPad and desktop contexts may prefer popovers to bottom sheets.

How should design systems handle variable content heights?

Dynamic height based on content fits the sheet to what it contains. Short content produces shorter sheets; long content produces taller sheets.

Fixed detents provide predictable heights. Medium sheets always reach half-height regardless of content, with scrolling for content exceeding that height.

Content-aware detents calculate heights based on content but constrain to maximum heights. Content determines height up to a maximum, preventing overwhelming sheets.

Design systems should specify the approach and any height limits. Maximum height prevents sheets from becoming nearly full-screen when a full modal would be more appropriate.

How do bottom sheets handle scrolling content?

Scroll detection distinguishes swipe-to-dismiss from content scrolling. When scrolled to top, downward swipe dismisses. When not at top, downward swipe scrolls content.

Fixed headers remain visible during content scroll. User context persists without scrolling back to see where they are.

Scroll indicators help users discover scrollable content. Visual cues (shadows, gradient fade, scroll bar) indicate content continues beyond visible area.

Nested scrolling requires careful implementation. Sheets containing lists or scrollable regions need proper scroll coordination to avoid conflicting gestures.

Summary

Modal bottom sheets provide lightweight overlay panels for secondary content and actions. iOS and Android both support bottom sheets with platform-specific APIs. Design systems should specify sheet heights, swipe behavior, keyboard handling, and content organization patterns to ensure consistent implementation. Bottom sheets work best for contextual content; longer flows may warrant full-screen modals.