Dialog vs Bottom Sheet vs Drawer
Three ways to say "put a layer on top"
I need to bring up a layer on top of the current screen. Which one?
Comparison table
| Pattern | Where it appears | Blocks the user | Page underneath | Main platforms |
|---|---|---|---|---|
| Modal模态框 / 对话框 | Center of the screen | Yes | Fully covered and dimmed | All platforms |
| Bottom Sheet底部弹出面板 | Bottom of the screen | Partially blocks | Stays visible, so context remains | Mobile |
| Drawer抽屉 | Side of the screen | Partially blocks | Mostly stays visible | All platforms |
← Swipe to see the full table
The demos, side by side
Modal
模态框 / 对话框Live Demo Playground
How to decide: Use it when the user "must decide"
Bottom Sheet
底部弹出面板Live Demo Playground
How to decide: The default picker on mobile
Drawer
抽屉Live Demo Playground
The drawer covers this half of the page
How to decide: When navigation or filtering needs real estate
Decision rule
- the user must choose before they can continue (delete confirmation, sign-in)use a Dialog
- on mobile you need to pick from a few options, or show a row of actionsuse a Bottom Sheet
- you have a lot to show and it deserves its own space (navigation, filters)use a Drawer
- you only want to tell the user something workeduse none of these — use a Toast
The real difference is how much they block. Heavier blocking (Dialog) for decisions the user cannot dodge; lighter blocking (Bottom Sheet, Drawer) for situations they can walk away from.