DzinerHub

DzinerHub

Bottom Sheet

A modal surface that slides up from the bottom to present actions or content.

Bottom Sheet

A modal surface that slides up from the bottom to present actions or content.

In Web & Mobile Design

What is a Bottom Sheet?

A bottom sheet is a modal or persistent surface that slides up from the bottom to show contextual actions or content.

When to use Bottom Sheets?

- Secondary tasks that should not take over the entire screen

- Mobile UIs where reachability mattersWhen not to use Bottom Sheets? - For critical flows that require full-screen focusWhat is the anatomy of Bottom Sheets?

- Drag handle and scrim

- Peek, half, and full-height states

- Safe areas and keyboard avoidance