Bottom sheet

A panel that slides up from the bottom edge of the screen over the current content, used for extra actions or settings.

Also called: bottom sheet, sheet, drawer, slide-up panel, panel from the bottom, slides up from the bottom, bottom panel, action sheet, swipe down to close, window from the bottom, half sheet

What it is for

A mobile alternative to modals and context menus. You can pick an option or filter a list without going to a new screen. It closes with a swipe down or a tap on the background.

Where you see it

• Map apps — place details over the map
• Native OS menus — the system “Share” menu
• E-commerce — picking a product option like color or size, or a sort order

What it is called in code

• Drawer
• bottom sheet
• action sheet

See also

• Modal window — A window that appears over the page. Until you close it, you can’t do anything else on the page.
• Bottom navigation — A navigation bar fixed to the bottom of a phone screen, with 3–5 icons for the main sections.
• Swipe actions — A swipe is a finger sliding across the screen. Swipe a list row left or right to delete or archive it, an email for example.