Bottom Sheet
底部弹出面板
A panel that slides up from the bottom edge of the screen and rests there without taking over the whole display.
Live Demo
Actually clickableWhat you just saw:The edit panel that rises from the bottom when you tap "Edit" in a photo app, the filter panel after tapping search in a maps app, the "Take Photo / Choose from Library / Scan" list that pops up from the "+" button.
What it actually is
A bottom sheet is the most-loved container on mobile: it preserves the feeling that you are still on the original page while opening up a focused area for actions. The two most common shapes are a fixed-height selection panel and a pure list of action buttons (an action sheet).
Anatomy · What it's made of
Scrim遮罩
Translucent black, does not fully hide the content underneath
Surface面板
Top corners rounded 16px, rises from the bottom
Drag Handle拖拽条
Short centered bar at the top, signals that it can be dragged
Title标题
Optional, centered
Content内容
A list of options or a form
Handle / Grabber抓手
Dragging it downward dismisses the sheet
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Mobile needs a lightweight selection or action panel | Yes |
| You want to keep the context of the page underneath (users still see where they are) | Yes |
| There are between 3 and 8 actions | Yes |
| The content needs full-screen depth (a long form, an editor) | No |
| A desktop web interface | Depends |
Once the content passes half the screen, a bottom sheet costs the user their sense of "page" — a full screen is steadier there.
When you need to strictly block the user until they decide, a modal interrupts far more forcefully.
Similar Patterns
Don't mix these upBottom SheetCurrent
底部弹出面板
A panel that slides up from the bottom edge of the screen and rests there without taking over the whole display.
Modal
模态框 / 对话框
Something pops up in the middle of the screen, and until you deal with it you cannot use the page underneath.
In one line:A panel that slides up from the bottom edge of the screen and rests there without taking over the whole display.
Modal
模态框 / 对话框
Something pops up in the middle of the screen, and until you deal with it you cannot use the page underneath.
Drawer
抽屉
A panel that slides in from the edge of the screen, usually from the side, sometimes from the bottom.
Popover
浮出层
A small panel that pops out next to a particular element, visually tethered to the thing that opened it.
Bottom Sheet
底部弹出面板
A panel that slides up from the bottom edge of the screen and rests there without taking over the whole display.
How to tell AI
Three levels of promptAdd the component name and specifics
After tapping "Filters", open a bottom sheet from the bottom of the screen: the height adapts to the content and never exceeds 70% of the viewport, the page behind stays visible under a translucent scrim, there is a drag handle at the top, and dragging down or tapping the scrim closes it.
Don't just say this to AI
Bad → BetterDon't say this to AI
Make something pop up from the bottom on click.
Say this instead
After tapping "Filters", open a bottom sheet: height adapts to content with max-height 70vh, top corners rounded 16px plus a drag handle, a 40% scrim that keeps the page visible behind, and four ways to close — drag down, scrim tap, cancel button, or ESC.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.