Bottom Sheet

Bottom sheet is a container that presents additional information to a user in an overlay.

Bottom Sheet is anchored to the bottom of the viewport and is most often used on mobile interfaces.

  1. Bottom Sheet container
  2. Resize handle
  3. Header
  4. Content area
  5. Footer

There are two core types of bottom sheets available — fixed and resizable. The user can expand the bottom sheet to take up a larger portion of the viewport by swiping or dragging upwards on the sheet.

Fixed bottom sheet is not resizable by the user and auto-sizes to fit the content.

Resizable bottom sheets allow the user to drag or swipe up to reveal more. The expanded bottom sheet leaves at least 48px uncovered at the top of the screen to allow for an area to tap to dimiss.

Resizable bottom sheets can have scrollable content.

Bottom sheet supports an optional header and footer. If a header and footer are provided they stick to the top and bottom of the sheet and the content between them can be scrolled.

Use a Bottom Sheet container on mobile touch devices as an replacement for Menus or Dropdowns with a list of actions.