Bottom Sheets
Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen. They can display a wide variety of content and controls.
Live Preview
Select Size
Share
Email
Copy
More
Brand Properties
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| borderRadius (top) | string | 28px | 12px | 12px |
| backgroundColor | color | #F7F2FA | #FFFFFF | #FFFFFF |
| elevation (shadow) | shadow | 0 -4px 8px rgba(0,0,0,0.15) | 0 10px 15px rgba(0,0,0,0.1) | 0 10px 15px rgba(0,0,0,0.1) |
| dragHandleColor | color | #79747E | #999999 | #8A8A8A |
| dragHandleWidth | string | 32px | 32px | 32px |
| dragHandleHeight | string | 4px | 4px | 4px |
| scrimColor | color | rgba(0,0,0,0.32) | rgba(0,0,0,0.5) | rgba(0,0,0,0.5) |
| padding | string | 16px | 16px | 16px |
Bottom Sheet Types
- Standard - Coexists with the main content, can be expanded or collapsed
- Modal - Blocks interaction with main content until dismissed
Usage Guidelines
- Use bottom sheets for supplementary content or secondary actions
- Always include a drag handle for visual affordance
- Modal bottom sheets should darken the main content with a scrim
- Bottom sheets should be swipeable to dismiss on touch devices
- Keep content minimal and focused on the current context