--- title: "Bottom sheet UI: anatomy, variants and examples | Kombai" description: "A bottom sheet slides up from the bottom of a phone screen with extra content, choices or a short task, and the screen above stays in view." canonical_url: https://kombai.com/glossary/bottom-sheet/ author: "The Kombai Team" --- # Bottom sheet A bottom sheet slides up from the bottom of a phone screen with extra content, choices or a short task, and the screen above stays in view. - Also called: sheet, modal sheet - Platforms: Mobile - In the Kombai gallery: [36 mobile designs](https://kombai.com/gallery/mobile/bottom-sheet/) - [Ironvale](https://kombai.com/gallery/inspirations/bottom-sheet-ios-28/) (Mobile) - [Foxglove](https://kombai.com/gallery/inspirations/bottom-sheet-ios-9/) (Mobile) - [Percival Ridge](https://kombai.com/gallery/inspirations/bottom-sheet-ios-33/) (Mobile) ## What is a bottom sheet? A bottom sheet is a panel that slides up from the bottom of a phone screen and holds extra content, choices or a short task. It can rest at more than one height, and people drag it up for more or down to close it. The screen it came from stays in view above it. - A grabber on the top edge shows that the sheet can be dragged. - Modal sheets dim the screen behind them. Standard sheets, like a peek over a map, leave it usable. ## When to use bottom sheet - **Choices tied to the screen.** Sort, share or pick a time without leaving the page. - **Detail over a map or list.** A place, a ride or an item, with the map still in view. - **Short tasks on a phone.** A booking, a rating or a quick form people finish in one go. ## When not to use one - **Long or multi-step flows.** Use a full screen view for editing or setup. - **A sheet on top of a sheet.** Show one at a time. Close the first before opening the next. - **Wide screens.** On desktop, use a dialog or a side drawer instead. ## Anatomy 1. **Scrim**: Dims the screen, closes on tap 2. **Grabber**: Drag or tap to resize 3. **Header**: Title and close button 4. **Content**: Scrolls inside the sheet 5. **Action**: One pinned main button 6. **States**: Closed, medium, large, focus ## Variants We sorted every bottom sheet design in the Kombai gallery and found five patterns. ### 1. Peek sheets A standard sheet rests low over a map or a feed, with no scrim, and drags up for more while the screen behind stays usable. - [Sablewick](https://kombai.com/gallery/inspirations/bottom-sheet-ios-29/) (Mobile) - [Rookswell](https://kombai.com/gallery/inspirations/bottom-sheet-ios-18/) (Mobile) - [Nibbleway](https://kombai.com/gallery/inspirations/drawer-ios-101/) (Mobile) ### 2. Option sheets A short list of choices, like a playback quality or a payment rail, picked with one tap. - [Ptarmigan](https://kombai.com/gallery/inspirations/bottom-sheet-ios-22/) (Mobile) - [Wardwell](https://kombai.com/gallery/inspirations/bottom-sheet-ios-13/) (Mobile) - [Tamarind](https://kombai.com/gallery/inspirations/bottom-sheet-ios-31/) (Mobile) ### 3. Picker sheets Dates, party sizes and delivery slots, with one pinned button that confirms the choice. - [Larkspur](https://kombai.com/gallery/inspirations/bottom-sheet-ios-12/) (Mobile) - [Voyaline](https://kombai.com/gallery/inspirations/drawer-ios-127/) (Mobile) - [Larkbox](https://kombai.com/gallery/inspirations/drawer-ios-133/) (Mobile) ### 4. Full-height sheets Long forms and big pickers rise to the large height, with a sliver of the screen behind still showing. - [Thistledown](https://kombai.com/gallery/inspirations/bottom-sheet-ios-11/) (Mobile) - [Vireo](https://kombai.com/gallery/inspirations/bottom-sheet-ios-1/) (Mobile) - [Obsidia](https://kombai.com/gallery/inspirations/bottom-sheet-ios-32/) (Mobile) ### 5. Introductions New features and how-it-works explainers: artwork, a headline, a few points and one button. - [Tablefolk](https://kombai.com/gallery/inspirations/bottom-sheet-ios-35/) (Mobile) - [Saffron Hill](https://kombai.com/gallery/inspirations/bottom-sheet-ios-27/) (Mobile) - [Merrowfen](https://kombai.com/gallery/inspirations/bottom-sheet-ios-8/) (Mobile) ## Where bottom sheets show up ### Permissions and alerts Location and notification opt-ins that list what people get before they agree. - [Thornbury](https://kombai.com/gallery/inspirations/bottom-sheet-ios-17/) (Mobile) - [Wildmere](https://kombai.com/gallery/inspirations/bottom-sheet-ios-21/) (Mobile) - [Tanager](https://kombai.com/gallery/inspirations/bottom-sheet-ios-19/) (Mobile) ### Maps and rides Ride options, bike details and place cards that sit over the map, so the map stays in view. - [Ravik](https://kombai.com/gallery/inspirations/drawer-ios-165/) (Mobile) - [Roambit](https://kombai.com/gallery/inspirations/drawer-ios-137/) (Mobile) - [Sprigg](https://kombai.com/gallery/inspirations/drawer-ios-126/) (Mobile) ### Detail and quick controls A score, a rule or a pipeline step opened from the screen, with a toggle or one action. - [Plover](https://kombai.com/gallery/inspirations/bottom-sheet-ios-36/) (Mobile) - [Quillon](https://kombai.com/gallery/inspirations/bottom-sheet-ios-6/) (Mobile) - [Orrery](https://kombai.com/gallery/inspirations/bottom-sheet-ios-2/) (Mobile) ## Bottom sheet vs similar components | | [Bottom sheet](https://kombai.com/glossary/bottom-sheet/) | [Action sheet](https://kombai.com/glossary/action-sheet/) | [Drawer](https://kombai.com/glossary/drawer/) | [Dialog](https://kombai.com/glossary/dialog/) | |---|---|---|---|---| | Sits | Along the bottom edge | Along the bottom edge | Along a side edge | Centered over the screen | | Holds | Lists, forms, maps or detail | A few actions and Cancel | Detail, forms, filters or menus | A question and its answers | | Best for | Mobile tasks that keep context | Choices about what people just did | Side panels on larger screens | Decisions that block the page | ## Build notes - A modal sheet is a dialog: role="dialog", aria-modal="true" and aria-labelledby pointing at its title. - Move focus into the sheet on open, close it on Escape and return focus to the button that opened it. - Let people drag it down or tap the scrim to close it. Ask first if they have unsaved changes. - Make the grabber a real control: a tap switches heights, and screen reader users can resize with it. - Give the drag handle a touch area of at least 48 by 48 dp. - Pin the main action to the bottom of the sheet and let only the content scroll. ## FAQ ### What's the difference between a bottom sheet and an action sheet? An action sheet is one kind of bottom sheet: a short list of choices about something people just did, like deleting or saving a draft, with Cancel at the bottom. A bottom sheet can hold anything, from a form or a picker to a place card over a map. ### What are detents? The heights a sheet rests at. On iPhone the system defines two: large, the fully expanded sheet, and medium, about half of that. People drag the grabber, or tap it, to move between them. ### Bottom sheet or dialog? Use a sheet for choices and short tasks tied to the current screen. Use a dialog or an alert for an urgent decision that must be answered, like confirming a delete that cannot be undone. ### Does a bottom sheet need a close button? People expect to swipe a sheet down to close it, but dragging can't be the only way. WCAG asks for a single-pointer alternative to every drag, so add a Close or Cancel button too. ## Related terms - [Action sheet](https://kombai.com/glossary/action-sheet/) - [Drawer](https://kombai.com/glossary/drawer/) - [Dialog](https://kombai.com/glossary/dialog/) - [Full screen overlay](https://kombai.com/glossary/full-screen-overlay/) ## References - [Apple Human Interface Guidelines: Sheets](https://developer.apple.com/design/human-interface-guidelines/sheets) - [Material Components for Android: Bottom sheets](https://github.com/material-components/material-components-android/blob/master/docs/components/BottomSheet.md) - [WAI-ARIA Authoring Practices: Dialog (modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) - [WCAG 2.2: Understanding Dragging Movements](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html)