Usage
A bottom sheet slides up from the bottom edge to hold secondary actions or content related to the current screen. Use it for a set of actions, a list, or a short form that needs focus without moving the person to a new screen.
- Use for actions or content that support the current screen rather than replacing it.
- Show a scrim behind the sheet so the content underneath stays visible but recedes.
- Let people dismiss the sheet by swiping down or touching outside it.
Design properties
| Property | Values | Default |
|---|---|---|
| Scrim Variant | False | True | True |
| Show supporting text Boolean | true | false | undefined |
| Show header area Boolean | true | false | true |
Types
Fixed list
Use for a set of actions or destinations that stays the same every time the sheet opens.
Dynamic list
Use for a list whose contents change with context, such as the current page or the person’s account state.
Input and form
Use to collect a short input or decision without moving the person to a new screen.
Behavior and interaction
Behavior
- The sheet slides up from the bottom edge and can be dismissed by swiping down, touching outside it, or completing the action it asks for.
- A scrim always sits behind an open sheet. It keeps the content beneath visible while moving focus to the sheet.
Positioning
- Dock the sheet to the bottom edge, spanning the full width.
- The sheet can take up half the screen, or expand to full height when the content needs it.
Related components
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Nov 24, 2025 |
1.0.0 |
Initial draft of guidance |