Overlays / The visual dictionary
Bottom sheet.
A surface attached to the bottom edge of a view.
Also calledbottom drawersliding panel
01
UI illustrationSee it in context
Place details
Open until 18:0002
What it is
A bottom sheet reveals supporting content while keeping part of the original screen visible. It may be modal or nonmodal; a drag handle alone should not be the only way to close or resize it.
When to use it
Use for contextual mobile content or a short task.
Know the difference
Bottom sheet describes position; modal sheet describes blocking behavior and may use another position.
03
Across platforms
WebiOSiPadOSAndroid
iOS · iPadOS
On Android this is a standard Material sheet pattern. On iOS and iPadOS, native sheet detents can provide different resting heights.
Web · Android
On the web, manage keyboard focus and dismissal explicitly. Android and desktop implementations should use the equivalent native surface when available.
04
Go to the source
Primary documentation for the pattern and its platform conventions.