Bottom Sheet

A surface that slides up from the bottom edge of a mobile screen to present secondary content or actions without leaving the current context.

Why it matters

It is mobile’s answer to the modal: secondary content arrives within thumb reach without tearing the user out of context. The height is the design decision — a sheet that covers everything is just a modal with worse affordances.

The component

It rises within thumb reach and the page stays put behind it — context kept, not torn.

The numbers

Thumb zone — the bottom third of the screen, where sheets live
Detents — the resting heights a sheet snaps between

Related terms

60-30-10 rule
Edge Case
Empty State
Screen Reader
Tab Bar

Ask your assistant

Define "Bottom Sheet" using uxspot.

Works in Claude, Cursor or any MCP client — connect the uxspot MCP.

Think it stuck? A 20-second round of Spot Check will tell you.