Bottom sheets are containers with supplementary content that is located at the bottom of the screen.

Principles

• Bottom sheets contain content that supplements the screen’s primary UI region.
• Bottom sheets can display a wide variety of content and layouts.
• Bottom sheets are easy to access on mobile.

Types

Modal bottom sheets are primarily used on mobile. However, there is also a bottom sheet solution on tablet.

Structure

Modal Bottom Sheet  – List View

Modal bottom sheets are alternatives to inline menus or simple dialogs on mobile, providing room for additional items, longer descriptions, and iconography. They must be dismissed to interact with the underlying content.

A. Header

B. List of Actions

C. Divider Line

Modal Bottom Sheet – Grid View

Modal bottom sheets can display a wide variety of content and layouts. This can range from menu items (in list and grid layout) to supplemental content laid out according to the layout grid.

A. Header

B. Application List

C. Divider Line

D. Action List

Specs

Modal Bottom Sheet – List View (Mobile)

Modal Bottom Sheet – List View (Tablet)

Modal Bottom Sheet – List View with Header (Mobile)

Modal Bottom Sheet – List View with Header (Tablet)

Modal Bottom Sheet – Grid View (Mobile)

Modal Bottom Sheet – Grid View (Tablet)

Modal Bottom Sheet – Grid View with Header (Mobile)

Modal Bottom Sheet – Grid View with Header (Tablet)