Components Bottom sheets

Bottom sheets

A bottom sheet is a sheet of material that slides up from the bottom edge of the screen and presents a set of clear and simple actions.

Bottom sheets are primarily a mobile component.

Usage Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Bottom sheets are best suited to displaying three or more actions that do not require a description. If there are fewer than three actions, or a detailed description is required, consider using a menu or dialog instead.

You can use bottom sheets to show actions related to other apps, or to allow entry points to other apps (via the app icon).

Bottom sheets can be list-style or grid-style. Grid layouts are easier to scan.

Content Expand and collapse content An arrow that points down when collapsed and points up when expanded.

In a list-style bottom sheet, each action should have a text description and a left-aligned icon. Use subheaders or titles to give context to the choices.

When necessary, use separators to group actions logically.

A scrollable grid-style bottom sheet can contain icons for share actions.

Scrollable grid-style bottom sheet with icons for standard share actions

Scrollable grid-style bottom sheet with icons for share actions

Scrollable grid-style bottom sheet with contact phone numbers

Scrollable grid-style bottom sheet with a separator in between contact phone numbers and email addresses

Behavior Expand and collapse content An arrow that points down when collapsed and points up when expanded.

When a bottom sheet is displayed, it animates upwards from the bottom edge of the screen. The rest of the screen dims, giving focus to the bottom sheet. Tapping outside of the bottom sheet, or swiping the bottom sheet downward, dismisses it.

If the bottom sheet contains more actions than can fit, the bottom sheet is scrollable. Scrolling may eventually allow the bottom sheet to expand to cover the entire screen. Add a dismiss button to the header, on the left side of the title, so users can easily dismiss an expanded bottom sheet.

Specs Expand and collapse content An arrow that points down when collapsed and points up when expanded.

The following specs are provided for mobile apps.

Font and color:

  • Text: Roboto Regular 16sp,  #000 87%
  • Title (optional): Roboto Regular 16sp, #000 54%
  • Default bottom sheet background fill: #FFF
  • Overlay shield fill: #000 20%

Redline for list-style bottom sheet in a mobile app.

Screen edge left & right margins: 16dp
Top and bottom margins: 8dp
List-item height: 48dp
List icons: 24x24dp, middle vertical alignment
Text associated with icon: 32dp horizontal padding

List-style bottom sheet in a mobile app

Redline for list-style sheet with header

Screen edge left & right margins: 16dp
Space below the top list: 7dp
Divider line: 1dp
Space above second bottom sheet: 8dp
List-item height: 48dp
List icons: 24x24dp, middle vertical alignment
Text associated with icon: 32dp horizontal padding

List title height: 56dp

List-style sheet with header

Example of a grid-style sheet with some options visible

Example of a grid-style sheet with all options visible

Redline for grid-style bottom sheet that contains a standard set of actions for other apps

Screen edge left & right margins: 24dp
Vertical space between grid lists: 16dp
Grids list icons: 48x48dp, middle vertical alignment, equally distributed across the grid
Grid list text area: 16dp tall, center-aligned below each icon
Padding below grid: 24dp

Grid-style bottom sheet that contains a standard set of actions for other apps