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, its variations, and configuration options. Each tab displays a different type of sheet.

Usage

Principles

Supporting

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

Fexible

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

Ergonomic

Bottom sheets are easy to reach on a mobile device.

Types of bottom sheets

Standard

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

Hybrid

Hybrid sheets have the permanence of a standard bottom sheet but also provides the focus of modal bottom sheet when expanded.

Create a clear hierarchy

Don't

Show toasters on top of bottom sheets.

Don't

Stack bottom sheets on top of each other.

Formatting

Anatomy

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

A. Bottom sheet container
B. Header
C. Drag handle (if resizable)
D. Title
E. Close action (modal only)
F. Content area
G. Footer (optional)
H. Scrim (modal only)

Behavior

States

Bottom sheets can have up to three different states:

• Collapsed
• Half expanded
• Expanded

Bottom sheets, using default settings, start off in a collapsed state but modal bottom sheets can be set to ignore the collapsed state.

1. Collapsed
   
2. Half expanded
   
3. Expanded
   

Resizeable

Sheets in a collapsed state can either be set to fixed or resizable. Fixed is, as it states, is a non-resizable bottom sheet. If the sheet, however, is set to be resizable it enables the user to switch between a collapsed sheet and an expanded sheet.

1. Fixed
   
2. Resizeable
   

As sheet can be expanded in two different ways:

• Adapt to content (default)
  If set to adapt to its content, a sheet will simply grow to fit all content when expanded.If content exceeds available space it will continue under its container, and footer if it is present.
• Two-step expansion
  A sheet can be set to expand in two steps. First up to 50% of parent container (if it exceeds height of collapsed state) and in the next step expand to fit content.

An expanded sheet always leaves 36 px to the top of the parent container.

Adapt to content

1. Collapsed sheet
   
2. Sheet expanded to fit content
   
3. Content exceeds available space and made scrollable
   

Two-step expansion

1. Collapsed sheet
   
2. Sheet expanded to 50 % of parent container
   
3. Content expanded to fit content
   

Visibility

Collapsed sheets will have a maximum height of 50 % of the screen and expanded sheets must always leave a minimum of 36 px to the top of the parent container.

1. Collapsed sheet cap at 50%
   
2. Expanded sheet always leaves 36px to the top of the container
   

Content and scroll

Content that don’t fit within it’s container will flow under its container and under the footer if there is one present or to the sides of the screen if content exceeds horizontal space.

A user can interact with content that is not visible within the container in different ways.

• A collapsed sheet
  While content can flow over the side of the container and below the container, a user can only scroll content horizontally on a collapsed sheet. If a user tries to scroll to reveal more of content, that’s overflowing vertically, it will result in the sheet expanding.
• An expanded sheet
  Content that overflow will, in expanded sheets, become scrollable vertically and/or horizontally.

1. Collapsed sheets
   
2. Expanded sheets
   

Control

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

Collapsed sheets

A. Swipe up to expand (if resizable).
B. Press container to expand (if resizable)

Fully expanded sheets

A. Click collapse action to collapse.
B. Swipe the sheet down to collapse.
C. If the content overflows its container, swiping within the area will scroll the content and once the content reaches the top, the user can continue to swipe down to collapse the sheet.

Sheets that has expanded in two steps

1. Sheet expanded to 50% of parent container.
   A. Click collapse action to collapse.
   B. Swipe sheet up to expand or down to collapse.
   C. If the content overflows its container, swiping within the area will scroll the content and once the content reaches its end, the user can continue to swipe up to expand or down to collapse the sheet.
   
2. Sheet expanded to fit content
   A. Click collapse action to collapse.
   B. Swipe sheet down to return to a 50% state or to collapse.
   C. If the content overflows its container, swiping within the area will scroll the content and once the content reaches the top, the user can continue to swipe down to collapse the sheet.

Bottom sheets on desktop

Bottom sheets are primarily designed for mobile devices and tablets, but it can be used on for desktop. Here is an example of an expandable collapsed standard bottom sheet and how to enable the user to control it with a mouse or trackpad.

A. Click container to expand.
B. Click and drag to expand.
C. Click an action, within the content of the sheet, to expand.

Responsive layout

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.
• Switching to a floating sheet.
• Switching to a side sheet to reduce the amount of space occupied on larger screens.

Don't

Use full-width bottom sheets in large screen layouts.

Do

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

Do

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

Do

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

Modify

Optional title

While the header isn’t optional, the use of a title is. The action (close or collapse) aligns with the title if present or to the top if the title is removed.

1. Standard & hybrid
   
2. Modal
   

Picture in header

A picture can be used in the header

Title

• If a picture is used in the header, the title, in the header, will be set to transparent until the content is scrolled behind the header in which the title is brought up to a fully visible state.
• A second title is placed at the top of the content to ensure high accessibility. This title is scrolled behind the header, along with the content, if scrolled when the bottom sheet is in an expanded state.

Transformation

• The picture remains in full height until the content of a bottom sheet, in an expanded state, is scrolled. As the content is scrolled , the header will shrink to a small state with the picture being pushed up and aligned with the bottom of the header.

Adjustments to ensure high accessibility

• A scrim is used, with a linear gradient, at the top of the picture when the content of the bottom sheet hasn’t been scrolled.
• When the content of the bottom sheet is scrolled, behind the header, the scrim expand to fully cover the header in a solid state.

1. Collapsed state
   
2. Expanded state
   
3. Expanded state with content scrolled behind the header

Corner radius

The top corners of the bottom sheet can be set to sharp, with a 0 px radius, or smooth, with a 24 px radius.

Sharp

Smooth

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.

Theming

A bottom sheet can be themed in various ways to adapt to the context in which it is placed. From light mode to dark mode, from one product to another. As always, it is important to concider accessibility when using different themes for the bottom sheet.