Resource: https://material.io/components/sheets-bottom#usage

Notes

• Always anchored to bottom of screen (hence, the name)

• 3 types

1. Standard → user can interact with the bottom sheet content and the main screen, great for multitasking
2. Modal → user must interact with or dismiss a modal bottom sheet in order to be able to interact with the main screen
   1. blocking behavior means it’s great for menus to help users focus on their available choices
3. Expanding → user can tap to expand bottom sheet to see all of its content

• Bottom sheets are full-width on mobile devices, can be full-width or inset on tablet or desktop (avoid full-width on large screens)
• Default elevation is 8dp (density-independent pixels)
• Max screen height of bottom sheets should be 50% of main screen - so users can still access the main UI when appropriate
• Expanding bottom sheets have 2 states → collapsed and expanded

Examples

Standard Bottom Sheet (Target app)

Modal Bottom Sheet (Target app)

Expanding Bottom Sheet (Google Maps)

Expanding Bottom Sheet (Target App)

Expanding Bottom Sheet (Target App)