# Bottom sheet

> A bottom sheet is a surface that slides up over the screen for a task related to it, and slides away when the task is done. Apple calls it a sheet.

Page: https://www.appetiteui.com/academy/glossary/bottom-sheet. Bottom sheet vs modal on iOS and Android. Also called Sheet, Modal sheet.

## At a glance

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Sheet | Bottom sheet | Modal Sheet |
| Sheet corner | 12 pt | 28 dp | `platform/sheet/corner` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Sheet | iOS / Sheet - Full Screen | M3 / Bottom sheet 412 wide and Side Sheet 320 wide | Material adds a side sheet for large screens |

## In practice

A sheet keeps the screen behind it in view, so people do not lose their place; a full screen modal hides it. Use a sheet for a choice, a modal for a task that must come first.

The kit’s Platform collection gives a sheet its corner, platform/sheet/corner, 12 on iOS and 28 on Android. The finance Pay screen, the food delivery Dish and the task Filters are sheets.

## Questions

### When should I use a bottom sheet instead of a modal?

Use a sheet for a task tied to the screen under it, such as choosing a size or filtering a list, because the screen stays in view. Use a full screen modal when the task must be finished before anything else, such as a payment.

### What corner radius does a bottom sheet have?

In Appetite UI’s Platform collection a sheet’s corner is 12 on iOS and 28 on Android, the value Material 3 gives its sheets.

## Sources

1. [Apple Human Interface Guidelines: Sheets](https://developer.apple.com/design/human-interface-guidelines/sheets)
2. [Material Design 3: Bottom sheets](https://m3.material.io/components/bottom-sheets/overview)

## Related

- Screens: [Checkout and payment screens](https://www.appetiteui.com/screens/patterns/checkout)
- Screens: [Search and filter screens](https://www.appetiteui.com/screens/patterns/search-and-filters)
- Docs: [Modal](https://www.appetiteui.com/docs/modal)
- Docs: [Action Sheet](https://www.appetiteui.com/docs/action-sheet)
- Glossary: [Action sheet](https://www.appetiteui.com/academy/glossary/action-sheet)
- Glossary: [Corner radius](https://www.appetiteui.com/academy/glossary/corner-radius)