Behavior comparison

Bottom sheet vs Drawer

Decisive difference

Bottom sheet is anchored to the bottom edge, opens to stable heights and can be dragged; Drawer enters from a defined side edge.

Bottom sheetChoose Bottom sheet if the action is compact, especially on mobile, and benefits from staying above the content.
DrawerChoose Drawer if the panel is more structured and enters from the left or right.

Decision

Should the surface stay persistent, enter from a side edge, or rise from the bottom?

Dimension	Bottom sheetBottom sheet	DrawerDrawer
Trigger	A tap opens the sheet; dragging its handle may then change its detent.	An explicit button opens a temporary task or navigation panel.
Modality	Often modal when expanded, with the background inert behind an overlay.	Can be modal or non-modal; the specimen is modal when the page behind it is inert.
Placement	Attached to the bottom edge and optionally stops at defined heights.	Slides from a side edge and remains attached to that edge.
Interactivity	Combines controls with vertical dragging; nested content scrolling must not fight the sheet gesture.	Contains navigation or task controls, with focus contained only in the modal form.
Focus	Focus enters the modal sheet, remains inside, and returns to the Filters opener after closing.	Opening places focus on the drawer heading or first useful field, contains it, and closing restores the opener.
Dismissal	Close control, Escape, and a downward gesture past the documented threshold dismiss; accidental small drags snap back.	The named close control and Escape always work; backdrop dismissal is disabled when it could discard changes.
Accessible role	dialog[aria-modal=true]	dialog[aria-modal=true]
Use case	Showing place details over a mobile map	Editing filters without leaving results
Mobile behavior	Designed for touch reach; preserve the safe area, software keyboard, and nested scroll behavior.	Use a wide or full-width panel; switch to a bottom sheet when bottom-edge reach is the better model.

Bottom sheet vs Drawer

Bottom sheet is anchored to the bottom edge, opens to stable heights and can be dragged; Drawer enters from a defined side edge.

Bottom sheetChoose Bottom sheet if the action is compact, especially on mobile, and benefits from staying above the content.
DrawerChoose Drawer if the panel is more structured and enters from the left or right.

Nine dimensions

Dimension	Bottom sheetBottom sheet	DrawerDrawer
Trigger	A tap opens the sheet; dragging its handle may then change its detent.	An explicit button opens a temporary task or navigation panel.
Modality	Often modal when expanded, with the background inert behind an overlay.	Can be modal or non-modal; the specimen is modal when the page behind it is inert.
Placement	Attached to the bottom edge and optionally stops at defined heights.	Slides from a side edge and remains attached to that edge.
Interactivity	Combines controls with vertical dragging; nested content scrolling must not fight the sheet gesture.	Contains navigation or task controls, with focus contained only in the modal form.
Focus	Focus enters the modal sheet, remains inside, and returns to the Filters opener after closing.	Opening places focus on the drawer heading or first useful field, contains it, and closing restores the opener.
Dismissal	Close control, Escape, and a downward gesture past the documented threshold dismiss; accidental small drags snap back.	The named close control and Escape always work; backdrop dismissal is disabled when it could discard changes.
Accessible role	dialog[aria-modal=true]	dialog[aria-modal=true]
Use case	Showing place details over a mobile map	Editing filters without leaving results
Mobile behavior	Designed for touch reach; preserve the safe area, software keyboard, and nested scroll behavior.	Use a wide or full-width panel; switch to a bottom sheet when bottom-edge reach is the better model.