Components

Bottom sheet

The primary purpose of bottom sheets is to offer complementary content, and functionality, to what the webpage offers and support the service in offering a seamless, ergonomic, experience.

Interactive demo

This demo lets you preview the bottom sheet component and its variations. Each button opens a different example.

Usage

Types of bottom sheets

Non-modal

Non-modal bottom sheets co-exist with the screen’s main UI region and allow for simultaneously viewing and interacting with both regions, especially when the main UI region is frequently scrolled or panned.

Use a standard bottom sheet to display content that complements the screen’s primary content.

Modal

Like dialogs, modal bottom sheets appear in front of app content, disabling all other app functionality when they appear, and remaining on screen until confirmed, dismissed, or a required action has been taken.

Create a clear hierarchy

Avoid stacking components on top of a bottom sheet that create a confusing hierarchy and an unclear way in how to interact with present components.

Don’t show dialogs on top of bottom sheets.

Don’t stack bottom sheets on top of each other.

Anatomy

Bottom sheets are anchored to the bottom of the viewport and are most often used on mobile interfaces.

A. Container
B. Header
C. Content area
D. Footer (optional)
E. Drag handle
F. Back action (optional)
G. Title
H. Close action (optional)
I. Supportive text (optional)
J. Primary action
K. Dismissive action (optional)
L. Scrim (modal only)

Behavior

Height

Bottom sheets can be set to three different heights: Auto (default), Half and Full.

• Auto (default)
  The sheet grows to fit its content, capped at the viewport with a small safety margin from the top. If content exceeds the available space, the body becomes scrollable.
• Half
  The sheet is fixed at 50% of the viewport. Content that exceeds the available space becomes scrollable inside the body.
• Full
  The sheet takes up the viewport with a small safety margin* from the top. Content that exceeds the available space becomes scrollable inside the body.

* The safety margin is 24 px on small screens and 32 px on larger screens.

Content & scroll

Content that doesn’t fit within its container becomes scrollable inside the sheet. The header and footer stay fixed; the body scrolls when content overflows vertically.

Control

There are various ways of interacting with a bottom sheet depending on its variant.

Fully expanded sheets

A fully expanded sheet can be dismissed in several ways:

• Swipe the sheet down to close it.
• If the content overflows, swipe inside the content area to scroll. Once you reach the top, continuing to swipe down closes the sheet.
• Click the close action in the top-right of the header.
• Click the scrim outside the sheet (modal only).

Bottom sheets on desktop

Bottom sheets are primarily designed for mobile devices and tablets, but they can be used on desktop. The same component is used — mouse and trackpad replace touch gestures.

Responsive layout

There are various ways of interacting with a bottom sheet depending on variant and state of the bottom sheet.

Scaling and adaption

On mobile devices, bottom sheets extend across the width of a screen and are elevated above the primary content. Bottom sheets should scale to fit larger screens in one of three ways:

• Setting a maximum width of inner content.
• Switching to a floating sheet.
• Switching to a side sheet to reduce the amount of space occupied on larger screens.

By setting a maximum width of the inner content of the sheet, the content can maintain a balance, and by this remain accessible.

A bottom sheet can be swapped for a side sheet that shows supporting content on larger screens.

On large screens, to preserve the intent and the context of the primary content, supporting content can be placed within a floating sheet/overlay modal.

Modify

Content freedom

Sheets can contain different content and have different layouts. There are no specific rules to what you can, or can’t, place within a bottom sheet.

The bottom rule remains though: a bottom sheet, and its content, should be complementary to what the webpage’s main UI area offers.