Bottom sheet

A bottom sheet is a container you can use to display supporting content or a short, supplementary task on mobile experiences.

When to use

Use a bottom sheet:

  • in mobile experiences when you need to temporarily break away from the main context to show content, or a short task, that’s supporting or supplementary

Don't use a bottom sheet:

  • if the content or task is not supplementary or supporting, and is part of the main context (use a full screen instead)

Best practice
  • Keep tasks short and simple — you don’t want the user to forget the main context they came from, so avoid creating a product within a product.
  • Don’t navigate between views within bottom sheets because they are just for short, simple tasks, and users could get lost if they don’t know how to go back.
  • Don't display a bottom sheet on top of another bottom sheet — either add the extra information to the existing bottom sheet content, or direct users to a new screen.


Scrolling the content

The height of the bottom sheet automatically adjusts to the content inside it. But if the content is longer than the maximum height that the bottom sheet can expand to, the content will overflow and become scrollable.

Dismissing a bottom sheet

Users can dismiss the bottom sheet by:

  • tapping or clicking the close button

  • taking an action within the bottom sheet content

  • dragging or swiping the bottom sheet down


A bottom sheet is a type of overlay that appears on top of the main content on the screen. It’s fixed to the bottom of the screen and sits above a dimmer.

The dimmer is used to focus the users attention on the bottom sheet content so that the user needs to interact with it before they can progress.


Bottom sheets fill the full width the screen on mobile devices.

On wider screens, like iPads, the bottom sheet will fill 2/3 of the width of the screen. Alternatively, you can configure the bottom sheet to adapt so that it displays the content within a different component on wider screens, to match the experience on desktop — for example, a popover, drawer, dropdown, or modal.


The height of a bottom sheet automatically adjusts to the content it contains.

Safe zone

There’s a 64 pixel safe zone at the top of the screen when the bottom sheet is fully expanded.

It’s there to reassure users that they are still within the original context, and gives them another way to dismiss.


Screenreader users won’t be able to use the drag down gesture to dismiss the bottom sheet as swipe gestures are already used to operate voice over software.

Instead, they can use these alternative ways to dismiss the bottom sheet on each platform.


Android users can dismiss the bottom sheet by using the native navigation to go back.


On iOS, a close button appears when VoiceOver is switched on, allowing screenreader users to dismiss the bottom sheet.

There's also a standard iOS VoiceOver gesture that allows users to dismiss an alert or return to the previous screen. It’s a two-finger scrub, where you move two fingers back and forth three times quickly in a 'Z' shape.


The bottom sheet has an invisible close button on web that screenreader users can tab to.


There’s a lot of flexibility when it comes to writing for bottom sheets as we don’t specify how the content should be displayed. But when designing for mobile experiences, it’s important to be concise.

It’s also good practice to front load the most important information. For example, if you’re using the bottom sheet to display a list of options, make sure the most relevant or important options are at the top.




Developer documentation




Web documentation