Bottom Sheet

The bottom sheet component is made up of a raised surface that contains content and affordances to close the bottom sheet. All other elements are optional. Bottom sheets come in two variants: full screen and partial. 

Full screen bottom sheet

Full screen bottom sheets are raised above the surface and completely cover the context underneath. 

1. Bottom sheet surface
2. Section heading (optional)
3. Close affordance & backstack affordance — Quick action button component
4. Menu button — Compact button (optional)
5. Header container (if needed)
6. Content area (just for reference)

Partial bottom sheet

Partial bottom sheets only come up as much as needed to display the content within the sheet (more on this in the behavior section).

1. Raised surface
2. Content heading (optional) (See content headings)
3. Scrim (optional)
4. Close affordance
5. Header container (if needed)
6. Content (just for reference)

Footer

Bottom sheets can contain optional footers to provide space for calls to action where the CTA can remain sticky and not scroll with the content.

1. Footer container
2. Content scrolled below footer (just for reference)
3. Content within the footer (just for reference)

Stepped nav

Bottom sheets can contain an optional stepped navigation within the footer where the user can jump between steps and quickly understand progress through a wizard-like experience.

1. Footer container
2. Content scrolled below footer (just for reference)
3. Steps — Quick action button 24

Heading alignment & truncation

Headings for full height bottom sheets should be left-aligned; however, when scrolled the content headings are always centered. Content headings for partial bottom sheets can either be left-aligned or centered, depending on what makes the most sense for the solution. In most cases, headings for partial bottom sheets should be left aligned, but when the rest of the content in the bottom sheet is centered, the heading should be centered as well.

Heading text should truncate when space is not available, and should never wrap to two lines

1. Full screen bottom sheet (left-aligned heading only)
2. Scrolled full screen bottom sheet (centered heading only)
3. Partial bottom sheet (left-aligned heading)
4. Scrolled partial bottom sheet (centered heading)

‍

Bottom sheets should always be anchored to the bottom of the screen, and can be placed into one of two states: contextual or persistent.

Contextual placement

Bottom sheets are contextual by nature, and should only appear when the user needs some contextual UI, and be dismissed fully when no longer needed.

‍

Persistent placement

Sometimes the content in a bottom sheet will be continually referenced throughout a user’s journey, and should be persistently pinned at the bottom of the screen until a flow is completed or the user navigates away from the context.

‍

Usage do’s

Bottom sheets are useful for a wide variety of use-cases and can contain one or more atoms on their surface, and can appear as a result of user interaction or by system request. Some examples of bottom sheet usage: 

• Providing quick access to contextual features.
• Surfacing contextual interaction options.
• Surfacing interstitial content with medium emphasis

Usage don'ts

Avoid using a bottom sheet when:

• The content makes more sense existing within the parent context
• The interaction is initiated by a card component (in which case the card should grow to fill the view instead of triggering a bottom sheet)
• There is no contextually useful information or possibilities for interaction on the bottom sheet

Native versus responsive web

Use bottom sheets on viewports smaller than 560px. On 561px and over, the physicality of gestures is lost, and interaction is typically performed with a mouse. Because of this, bottom sheets should be replaced with Side Sheets or otherwise persistent content.

Anything that is considered “Mobile” will display a bottom sheet while “Tablet” and “Desktop” display the side sheet.