Bottom sheet

Resources

Properties

Best practises

• Bottom sheets are for use on mobile and tablet.
• Use bottom sheets for secondary actions, that don’t require full screen attention.
• Use them to present additional options or details without navigating away from the main screen.
• Avoid stacking multiple bottom sheets.
• Make sure bottom sheets are dismissable through close button or drag handle.

When to use

When providing supplementary or contextual content without navigation away from the main screen.

If the content is too complex, requires multiple steps or involves scrolling, consider full page view instead.
If the bottom sheet would unexpectedly interrupt user's workflow, use alert or snackbar instead.

Behaviour

Bottom sheets typically slide in from the bottom of the screen and are most commonly used on mobile devices. Bottom sheets are always modal, meaning that the bottom sheet blocks user interaction with the rest of the interface until closed.

Size

Bottom sheets typically extend across the entire screen width in mobile devices for visual stability with the rest of the content. Height of the bottom sheet adapts fluidly with the device size and content.