Sheets
A sheet is a container that slides up or appears over content to present a focused task or decision, temporarily blocking background interaction.
Philosophy
Sheets let users complete short, self-contained tasks without leaving the current context.
Provide focus by isolating content.
Support progressive disclosure (show details only when needed).
Avoid overuse — only for tasks that require user attention.
Anatomy
Variants
Bottom Sheet
Slides up from bottom for contextual tasks.
Full-Screen Sheet
Takes over screen for complex flows.
States
Open
Sheet visible, background dimmed.
Usage tips
Dos
Use for focused, short tasks like editing details, confirming actions, or filling forms.
Keep content minimal and focused.
Make sheets dismissible (swipe down, close button, or cancel).
Don’ts
Don’t use sheets for long, complex workflows — use dedicated pages.
Don’t stack multiple sheets on top of each other.
Don’t prevent dismissal without a strong reason (e.g., unsaved changes).
Real-world example
