The Rise of Bottom Sheets
Bottom sheets have become the dominant overlay pattern in mobile apps, largely replacing traditional centered modals and full-screen overlays. The reason is ergonomics: on large phones, bottom sheets place content and controls within thumb reach, while centered modals force users to stretch to the middle or top of the screen.
Both iOS and Android now provide native bottom sheet components with standardized behavior, making them a first-class citizen in mobile UI design.
Bottom Sheet vs Modal vs Dialog
Understanding when to use each pattern is critical for good UX:
Bottom Sheet: A panel sliding up from the bottom, draggable to different heights. Background content is partially visible. Use for actions, options, secondary content, filters, sharing menus, comments, and media controls.
Modal (Full Screen): A view that covers the current screen with its own navigation bar and close/done button. Use for multi-step tasks (composing, editing, creating), immersive content (video, image editor), or flows that feel separate from the parent.
Dialog (Alert): A small centered overlay with title, message, and 1-3 buttons. Background is dimmed and the dialog demands a response. Use for confirmations, important notifications, and binary decisions.
| Pattern | Coverage | Dismissal | Complexity | Thumb Reach |
|---|---|---|---|---|
| Bottom Sheet | Partial | Drag down, tap outside | Simple to medium | Excellent |
| Modal | Full | Close button, swipe down | Medium to complex | Standard |
| Dialog | Minimal | Button tap | Very simple | Standard |
Bottom Sheet Detents
Detents define the heights where a bottom sheet can rest. Modern implementations support multiple positions:
Peek (small): Shows just a header or summary, usually 15-25% of screen height. Users pull up to see more.
Half (medium): Shows main content at roughly 50% of screen height. This is the default starting position for most sheets.
Expanded (large): Nearly full screen at 90-95% height, showing all content with full scrollability while leaving a small gap to see the parent screen.
iOS: UISheetPresentationController and SwiftUI .presentationDetents support .medium(), .large(), .height(), .fraction(), and custom values. Use .presentationDragIndicator(.visible) to show the grab handle.
Android: BottomSheetBehavior supports STATE_COLLAPSED, STATE_HALF_EXPANDED, STATE_EXPANDED, and STATE_HIDDEN. Compose provides ModalBottomSheet and BottomSheetScaffold with SheetState management.
Dismissal Behavior
Swipe down: The primary dismissal gesture. The sheet follows the finger during drag, accelerates when released past a threshold (typically 30-50% of current height), and snaps back if released before it.
Tap outside: Tapping the dimmed background dismisses the sheet. For sheets with unsaved changes, consider a confirmation dialog first.
Close button: Always include a visible close mechanism in addition to gestures. Some users, especially those using assistive technology, cannot swipe.
Scroll Behavior Inside Sheets
When a bottom sheet contains scrollable content, the interaction must be carefully managed. When content is scrolled to the top and the user swipes down, the sheet should drag. When content is scrolled below the top, downward swipes should scroll content instead. Native implementations handle this automatically, but custom ones frequently get it wrong.
Accessibility
VoiceOver and TalkBack must announce sheets as overlays. Focus moves to the sheet on appear and returns to the trigger on dismiss. Content must accommodate Dynamic Type. When "Reduce Motion" is enabled, use fade instead of slide. All elements must be reachable by Voice Control and Switch Control.
Common Mistakes
- Nesting sheets: A sheet opening another sheet creates confusing navigation. Push content within the same sheet or use a modal instead.
- Too many detents: More than 3 makes behavior unpredictable. Stick to 2 for most cases.
- No dimmed background: Users cannot tell the sheet is an overlay without a scrim.
- Ignoring keyboard: Sheets must adjust when text fields receive focus to stay visible.
- Fixed height: Short content should not create a half-empty oversized sheet.