Alert Avatar Bottom sheet When to useBest practiceInteractionPlacementAccessibilityContentAvailabilityButton Card Carousel Cards Checkbox Chip Circular button Compact date input Copy Block Critical banner Date input Date picker Divider Dropdown Icon button Image Ratios Instruction Media Button Modal Money input Navigation option Nudge Password input Popover Progress Bar Progress Spinners Promo card Radio Screen loader Search input Section header Segmented control Select Snackbar Summary Switch Table Tabs Text area Text input Upload Upload input
Design at Wise Foundations Components AlertAvatarBottom sheetButtonCardCarousel CardsCheckboxChipCircular buttonCompact date inputCopy BlockCritical bannerDate inputDate pickerDividerDropdownIcon buttonImage RatiosInstructionMedia Button ModalMoney inputNavigation optionNudgePassword inputPopoverProgress Bar Progress SpinnersPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTableTabsText areaText inputUploadUpload inputPatterns Resources
Bottom sheet

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

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

Interaction

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

Placement

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.

Width

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.

Height

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.

Accessibility

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

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

iOS

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.

Web

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

Content

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.

Availability

Platform

Available

Developer documentation

Android

iOS

Web

Web documentation