Bottom Sheet · Drawer · Modal · Popover
4 concepts compared across 3 dimensions. Click a column header to open the concept.
TRY BEFORE YOU CHOOSE
One task. Different ways to do it.
Try filtering Home items below ¥200. Close, reopen, then select a result. Notice what gets covered and which choices persist. Previews are independent; closing preserves filters, while resetting or leaving this group clears them.
Modal
Overlay6 items · up to ¥500
Select an item to try the result area
Covers results to focus on a choice. Close it to interact with products.
Explore this component →Side drawer
Non-modal6 items · up to ¥500
Select an item to try the result area
This non-modal drawer keeps results interactive on the left. Narrow containers leave less room for results.
Explore this component →Bottom sheet
Overlay6 items · up to ¥500
Select an item to try the result area
Opens from below, retaining context above. Extra content scrolls inside the panel.
Explore this component →These bounded previews compare behavior. Drawers can also be modal. Test real device viewports, long content, and assistive technology in your project.
| 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 |