Loading…
Loading…
Bottom sheets are mobile UI surfaces sliding up from the bottom edge, providing contextual actions while maintaining connection to the underlying view.
stellae.design
Bottom sheets slide up from the bottom of the screen. Two variants: modal (backdrop dimming) and persistent (alongside content). Ergonomically superior to top-positioned modals on mobile — within thumb reach. They maintain partial visibility of underlying content. Standard behaviors: swipe-down dismiss, snap points (peek, half, full), drag handle.
Bottom sheets are surface components that slide up from the bottom edge of a mobile screen to present secondary content, actions, or navigation options without fully replacing the current view — functioning as a middle ground between a full-screen modal and an inline expansion. They have become a foundational pattern in mobile design because they map naturally to thumb-reachable zones, preserve context by keeping the parent screen partially visible, and provide a progressive disclosure mechanism that keeps primary interfaces clean while making deeper functionality instantly accessible. Google's Material Design popularized the pattern, but bottom sheets now appear across iOS, Android, and mobile web interfaces because they solve the fundamental mobile challenge of limited screen space without sacrificing discoverability.
Google Maps uses a multi-state bottom sheet that peeks with a location name and rating, half-expands to show photos, hours, and quick actions, and fully expands to reveal the complete location profile with reviews and related places. The progressive disclosure lets users get essential information — is it open, how far away, how rated — without losing the map context behind the sheet. The interaction model is so intuitive that users learn it without instruction, establishing bottom sheets as a navigation convention for spatial interfaces.
Apple Music presents a persistent mini bottom sheet showing the currently playing track that can be swiped up to reveal full playback controls, lyrics, queue management, and AirPlay options. The collapsed state provides just enough information — song title, artist, play/pause — to maintain awareness without occupying screen space needed for browsing. The smooth expansion animation and snap-back gesture create a satisfying physical interaction that users perform dozens of times per listening session.
A travel booking app places its entire main navigation — flights, hotels, car rentals, activities — inside a bottom sheet that users must pull up from a thin handle bar on every screen, replacing a standard tab bar or navigation menu. First-time users do not discover the navigation for several minutes because the collapsed handle provides no visual indication that it contains core app functionality. Hiding primary navigation inside a bottom sheet violates the pattern's purpose as a progressive disclosure mechanism for secondary content and creates a discoverability crisis for the most important user actions.
• The most common mistake is using bottom sheets for content that requires full attention and extensive interaction, such as multi-step forms or long articles — bottom sheets should augment the current context, not replace it, and when the secondary content grows too complex, a full-screen transition is more appropriate. Another frequent error is implementing bottom sheets without proper gesture handling, creating sheets that feel laggy, jump between states unpredictably, or fail to dismiss when swiped down, which makes the pattern feel broken rather than fluid. Teams also forget to handle accessibility: bottom sheets must trap focus when open, announce their appearance to screen readers, support dismissal via the Escape key or a visible close button, and not block access to critical page content for users who cannot perform swipe gestures.
Was this article helpful?