Bottom Sheet
底部抽屉
Aliases:底部抽屉底部面板上拉面板手机底部弹出来的面板底部弹层bottom sheetaction sheet
What is it
A panel that rises from the bottom edge over the current page, with a grabber for dragging or swipe-to-dismiss. Its interruption level sits between a modal and a popover: there is a backdrop, yet it is thumb-reachable and collapses on a downward swipe. The default mobile container for filters, sharing and short forms; on desktop prefer a side drawer or centered dialog.
Name disambiguation
"Sheet" is overloaded: a bottom sheet rises from the bottom edge; a drawer slides from a side edge; a macOS window sheet drops down inside a window; a spreadsheet sheet is a worksheet and has nothing to do with overlays.
Interactive playground
Try it. Make an informed choice.Open the sheet, drag the grabber between detents and swipe down to dismiss; feel how it differs from a side drawer.
Loading lab…
What to look for
- 01A downward swipe or backdrop tap dismisses; Esc works too
- 02The panel rises from the bottom edge with actions in the thumb zone
✓ When to use
- Short mobile tasks — filter, sort, share — layered over the current page
- A short action or option list that one thumb can reach
- More content than a one-line tooltip, less than a full-page flow
✕ When not to use
- Desktop-first interfaces — use a drawer or modal
- A forced decision that must not be dismissed casually — use a modal
- Long forms or long reads — a full page holds up better
Variants
Fixed height
固定高度
Predictable content size — lands in one shot, no dragging
Draggable detents
可拖拽档位
Grabber drags between half and full detents, iOS-sheet style
Full expand
全屏展开
Pulls up to full screen for long content or on-screen keyboards
Implementation
position: fixedtransformtransitiontouch-actionPin the panel with fixed positioning and animate transform: translateY(100%) ↔ 0 to show and hide (never animate height — GPU-friendly); the grabber is a 36×4 rounded bar. Detents track dy via pointer events and snap to the nearest stop on release; a swipe past the threshold dismisses. Fade the backdrop in, lock body scroll, move focus into the panel, close on Esc; respect prefers-reduced-motion.
Platform API
<dialog>role="dialog"aria-modal="true"In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| iOS | UISheetPresentationController |
| MUI | SwipeableDrawer |
| Radix | Dialog |
Compare
Full comparison →| Bottom Sheet底部抽屉 | Drawer抽屉 | Modal模态框 | Popover气泡卡片 | |
|---|---|---|---|---|
| Interruption | Medium-high — backdrop blocks, but a swipe dismisses fast | High — backdrop covers the page while open | High — backdrop blocks the page | Low — no backdrop, page stays live |
| Content capacity | Medium-high — action lists and short forms fit | High — long lists and forms fit | Medium — short content and small forms | Medium — small interactive content |
| Mobile friendly | Excellent — the thumb zone is the bottom of the screen | Good — edge sliding feels natural | Medium — go full-screen for long content | Poor — anchored position overflows easily |
Related concepts
A panel that slides in from a screen edge (usually right or left), usually with a backdrop. Lighter than a modal: it carries longer content without leaving the page, and closing restores the original context. On mobile it appears as a nav drawer or a bottom sheet.
ComponentsAlternativeA dialog rendered above the page with a translucent backdrop that interrupts the current flow and demands a task or decision first. The backdrop blocks interaction with the underlying page and focus is temporarily trapped inside — the most disruptive of the overlay containers.
ComponentsAlternativePress at the top of a list and drag downward: an indicator tracks the pull distance, and releasing past a threshold refetches the latest data. It solves the "content may be stale" problem — the user requests a refresh deliberately and predictably, staying in control of both timing and outcome instead of waiting for background polling.
PatternsUsed with