Sheets: bottom

Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen.


Usage

Bottom sheets are supplementary surfaces primarily used on mobile.

They come in two types:

  • Standard bottom sheets display content that complements the screen’s primary content. They remain visible while users interact with the primary content.
  • Modal bottom sheets are an alternative to inline menus or simple dialogs on mobile, providing room for additional items, longer descriptions, and iconography. They must be dismissed in order to interact with the underlying content.

Standard bottom sheet

A user can interact with both the bottom sheet and the rest of the screen content.

Modal bottom sheet

A user must interact with or dismiss a modal bottom sheet.

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...

Read More

Supporting

Bottom sheets contain content that supplements the screen’s primary UI region.

Flexible

Bottom sheets can display a wide variety of content and layouts.

Ergonomic

Bottom sheets are easy to reach on a mobile device.


Anatomy

  1. Sheet
  2. Contents
  3. Scrim (Modal only)

Sheet

Bottom sheets are anchored to the bottom edge of the screen and appear in front of other UI elements. They are full-width on mobile and...

Read More

Bottom sheets are anchored to the bottom edge of the screen and appear in front of other UI elements. They are full-width on mobile and can be inset or full-width on tablet or desktop.

Do.

A bottom sheet is anchored to the bottom edge of the screen.

Don’t.

Don’t inset all sides of a bottom sheet from screen edges. This can make it hard to see and allow it to be confused for other components, such as snackbars.

Standard bottom sheet inset on desktop

Contents

Bottom sheets can display a wide variety of content and layouts, ranging from menu items (in list and grid layouts), to supplemental content laid out...

Read More

Bottom sheets can display a wide variety of content and layouts, ranging from menu items (in list and grid layouts), to supplemental content laid out according to the layout grid.

Content from a bottom sheet that initially appears below the screen edge can become visible when the sheet is dragged into view.

Menu of actions (in a list) inside a modal bottom sheet

Menu of apps (in a grid layout) inside a modal bottom sheet

The location information in this standard bottom sheet initially extends below the screen edge. It can be dragged into view.

This music player has been made fully visible to reveal a track list beneath the player.


Behavior

Visibility

When bottom sheets initially appear on screen, they may contain content that extends below the bottom of the screen. They can be swiped or dragged...

Read More

Initial appearance

When bottom sheets initially appear on screen, they may contain content that extends below the bottom of the screen. They can be swiped or dragged up to become full-screen. Depending on the content, bottom sheets can also become full-screen by tapping on their surface or an expand icon.

Full-screen

When full-screen, bottom sheets can be internally scrolled to reveal additional content. They display a top app bar, which elevates upon scroll.

In the top app bar, full-screen standard bottom sheets contain a collapse icon that returns the sheet to its initial position. Full-screen modal bottom sheets contain a dismiss icon that dismisses the sheet entirely from view.

Do.

Partially visible bottom sheets can be dragged to full-screen view and scroll internally.

Do.

Include a close affordance in a full-height modal bottom sheet to dismiss the sheet.


Standard bottom sheet

Usage

Standard bottom sheets co-exist with the screen’s main UI region and allow for simultaneously viewing and interacting with both regions. They are commonly used to...

Read More

Standard bottom sheets co-exist with the screen’s main UI region and allow for simultaneously viewing and interacting with both regions. They are commonly used to keep a feature or secondary content visible on screen when content in main UI region is frequently scrolled or panned.

Do.

Standard bottom sheets can contain supplementary content that continues below the screen, such as location information over a map.

Do.

Use a standard bottom sheet to persist an important feature such as media controls in a music app.

Behavior

Standard bottom sheets remain on-screen when a user interacts with the main UI region or the sheet itself. They have a default elevation of 8dp,...

Read More

Interaction

Standard bottom sheets remain on-screen when a user interacts with the main UI region or the sheet itself. They have a default elevation of 8dp, which allows content in the main UI region behind to scroll or pan and for the sheet to temporarily cover the main UI region when made full-screen. At full-screen height, they should contain a collapse icon in an app bar to return to their initial position.

Do.

Standard bottom sheets are elevated above the main UI region so their visibility is not affected by panning or scrolling.

Do.

This music player in a standard bottom sheet remains on-screen as the user browses available music.

Placement

The contents of standard bottom sheets on mobile can be moved into side sheets on larger screen sizes given the additional horizontal space. Side sheets...

Read More

The contents of standard bottom sheets on mobile can be moved into side sheets on larger screen sizes given the additional horizontal space.

On mobile, the location information for this map is displayed in a standard bottom sheet due to limited screen width.

On desktop, the location information for this map is displayed in side sheet because screen widths are larger than screen heights.


Modal bottom sheet

Usage

Modal bottom sheets present a set of choices while blocking interaction with the rest of the screen. They are an alternative to inline menus and...

Read More

Modal bottom sheets present a set of choices while blocking interaction with the rest of the screen. They are an alternative to inline menus and simple dialogs on mobile, providing additional room for content, iconography, and actions.

Modal bottom sheets are used in mobile apps only.

Behavior

Modal bottom sheets have a default elevation of 16dp. This elevation allows them to appear over most UI elements and allows them to be pulled...

Read More

Elevation and scrim

Modal bottom sheets have a default elevation of 16dp. This elevation allows them to appear over most UI elements and allows them to be pulled up in front of the entire UI to display more options.

A modal bottom sheet causes all content and UI elements behind it to display a scrim, which indicates that they will not respond to user interaction. Tapping the scrim dismisses both the modal bottom sheet and scrim from view.

Do.

Use a visible scrim with modal bottom sheets to inform users they cannot interact with the rest of the screen.

Don’t.

Don’t use an invisible scrim for modal bottom sheets. This can mislead users about their ability to interact with the rest of the screen.

Visibility

To provide initial access to its top actions, the initial vertical position of modal bottom sheets is capped at 50% of the screen height.

Modal bottom sheets whose contents exceed 50% of the screen height can then be pulled across the full screen, scrolling internally to access their remaining items.

Sheet height

Visibility and behavior

Under 50% of screen height

Visible at full height

50 to 100% of screen height

Partially visibility at 50% of screen height.
On scroll or surface tap, reveal full sheet.

Greater than or equal to 100% of screen height

Partially visible at 50% of screen height.
On scroll or container tap, move to top of screen and scroll contents internally.
Add internal action to close.

Control

Modal bottom sheets appear when triggered by a user action, such as tapping a button or an overflow icon. They can be dismissed by:

  • Tapping a menu item or action within the bottom sheet
  • Tapping the scrim
  • Swiping the sheet down
  • Using a close affordance within the bottom sheet’s top app bar, if available

Placement

Modal bottom sheets are most effective on small screens. Menus display a list of choices on temporary surfaces. Related Article arrow_downward Dialogs inform users about...

Read More

Modal bottom sheets are most effective on small screens.

On larger screens, use menus or dialogs to create clear visual connections to the triggering UI element.


Theming

Posivibes Material Theme

This social media app’s bottom sheets have been customized using Material Theming. Areas of customization include color and shape. Posivibe’s bottom sheets use custom color...

Read More

This social media app’s bottom sheets have been customized using Material Theming. Areas of customization include color and shape.

Posivibe’s customized bottom sheets

Color

Posivibe’s bottom sheets use custom color on three elements: container, text, and icons.

Element

Category

Attribute

Value

Container

Surface

Color

Opacity

#FFFFFF

100%

Text, icons

On Surface

Color

Opacity

#000000

100%

Shape

Posivibe’s bottom sheets use a custom container shape.

Element

Attribute

Value

Container

Top left corner

Top right corner

Bottom right corner

Bottom left corner

Sharp 0dp

Sharp 0dp

Sharp 0dp

Sharp 0dp


Specs

Modal bottom sheet for mobile

  • max-height 1/2 screen
  • 360
  • 16
  • 56
  • 56
  • 36
  • General

    Scrim

    #000000 Opacity:32%

flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)

  • 360
  • max-height 1/2 screen
  • 56
  • 56
  • 16
  • #ffffff

    R255 G255 B255

  • General

    Scrim

    #000000 Opacity:32%

flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)

Standard bottom sheet for mobile

  • min height: 56dp
  • 360
flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)


Implementation

Bottom sheets implementation support for each platform is indicated below.

Android Material Component

Status: Under Development

IOS Material Component

Status: Under Development