When to use
Use a bottom sheet to display supplementary content or to facilitate a short, supporting task in mobile or responsive experiences. Ideal for scenarios where users need to briefly step away from the main content without losing context, such as:
- Viewing a list of options or settings.
- Showing additional details related to the current screen.
- Completing simple, single-step actions like filters or quick edits.
When not to use
Avoid using a bottom sheet:
- For tasks that are central to the main flow or require significant user attention (use a full-screen layout instead).
- When the content spans multiple steps or requires navigation (consider a modal or dedicated page).
- If the content is critical and demands immediate action, as bottom sheets are less disruptive than modals.
- On desktop, unless adapted to a different component like a Side Panel or Dialog.
Behaviour
Fixed Header and Footer
Designed for scrollable content, ensuring key actions (e.g., close button or primary CTA) remain accessible at all times. The header and footer are pinned, while the middle section scrolls independently.
Dynamic Height
Automatically adjusts its height to match the content, maintaining an uncluttered experience for shorter tasks.
Accessibility
The close button receives focus as soon as the bottom sheet opens, making it easy for keyboard and screen reader users to dismiss. Users can dismiss the bottom sheet by:
- Clicking or tapping the close button.
- Dragging or swiping the bottom sheet downward.
- Taking a primary action within the sheet content.
Interaction and Placement
The bottom sheet overlays the main content and is anchored to the bottom of the screen. A dimmed background draws attention to the sheet while ensuring users stay connected to the original context.