Bottom sheet
/BOT-um SHEET/ · noun · OVERLAY pattern · #044
A card that slides up over the screen for a quick sub-task while keeping the parent visible.
Also called: bottom drawer, slide-up panel, sheet.
You might call it
- “the menu that slides up from the bottom”
- “a slide-up menu”
- “a pop-up panel from the bottom of the screen”
- “the half-screen popup you can drag up”
- “the options panel that rises from the bottom on iPhone”
…its name is Bottom sheet.
Common questions
Bottom sheet vs modal dialog: what is the difference?
A modal dialog interrupts: it sits mid-screen and demands a decision first. A bottom sheet continues the current task from the bottom edge. A sheet can itself be modal (it dims and blocks the screen behind it, as an iOS sheet always does) or standard, leaving the background usable. A drawer differs again: it slides in from the side with navigation.
What is the panel that slides up from the bottom of the screen called?
A bottom sheet — a card that rises from the bottom edge to handle a quick sub-task while the parent screen stays visible behind it. iOS calls it a sheet; Material Design distinguishes standard and modal bottom sheets.
What is a bottom sheet in .NET MAUI?
In a .NET MAUI app, a bottom sheet is the same UI pattern: a temporary panel attached to the bottom edge. The pattern name describes the interaction; the component or library used to implement it depends on the MAUI project.
In code
| SwiftUI | .sheet() .presentationDetents() |
|---|---|
| UIKit | UISheetPresentationController |
| Jetpack Compose | ModalBottomSheet BottomSheetScaffold |
| Android (Views) | BottomSheetDialogFragment BottomSheetBehavior |
| Flutter | showModalBottomSheet() DraggableScrollableSheet |
| Web (HTML) | <dialog> No native bottom sheet — usually a <dialog> pinned to the bottom edge |
Prompt for your AI coding tool
Add a bottom sheet: tapping the trigger slides a panel up from the bottom edge. Dim and block the screen behind it while it is open, show a drag handle at the top, open it at half height and let it expand to full height when dragged up. Dismiss it by swiping down, tapping the dimmed area or pressing Escape, and return focus to the trigger when it closes.
More UI words to use when vibe coding →