---
url: /components/bottom-sheets/overview.md
description: >-
  Bottom sheets are surfaces containing supplementary content, anchored to the
  bottom of the screen.
---

# Bottom sheets

Bottom sheets are surfaces containing supplementary content, anchored to the bottom of the screen.

**Overview** · [Specs](specs.md) · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

![Bottom sheets](/assets/6c46e006-mrolk9tf-bottom-sheet.D6kV9SQ1.webp)

* Use bottom sheets in [compact](../../foundations/layout/breakpoints/compact.md "Window widths smaller than 600dp, such as a phone in portrait orientation.") and [medium breakpoints](../../foundations/layout/breakpoints/medium.md "Window widths from 600dp to 839dp, such as a tablet or foldable in portrait orientation.")
* Two variants: standard and modal
* Content should be additional or secondary (not the app’s main content)
* Bottom sheets can be dismissed in order to interact with the main content

![Side by side view of standard bottom sheet modal bottom sheet](/assets/e1cf0d55-lvp3m82k-1.CZRYyPOS.webp)

1. Standard bottom sheet
2. Modal bottom sheet

## Availability & resources

| Type | Resource | Status |
| --- | --- | --- |
| Design | [Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460) | Available |
| Implementation | [Flutter](https://api.flutter.dev/flutter/material/BottomSheet-class.html) | Available |
| Implementation | [Android Views (MDC-Android)](https://github.com/material-components/material-components-android/blob/master/docs/components/BottomSheet.md) | Available |
| Implementation | [Jetpack Compose](https://developer.android.com/develop/ui/compose/components/bottom-sheets) | Available |
| Implementation | Web | Unavailable |

## Differences from M2

* Color: New color mappings and compatibility with [dynamic color](../../styles/color/dynamic/choosing-a-source.md "Dynamic color takes a single color from a user's wallpaper or in-app content and creates an accessible color scheme assigned to elements in the UI.")
* Shape: Bottom sheets have a 28dp top corner radius
* Layout: New max-width of 640dp and an optional drag handle with an accessible 48dp hit target

![Diagram of floating sheet set on screen background](/assets/48a4b208-lvp3mrmz-2.8vjPJPCp.webp)