Skip to content

Updated

Copy page

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.

Copy page

Updated

On this page
  1. In the kit
  2. Names
  3. iOS and Android
  4. In practice
  5. Related

In the kit

Where it appears in Appetite UI: Food delivery app, Dish. The theme switch shows the dark frame.

Dish393 x 852 each, Light and Dark
Foodie app Dish screen: a sheet over a bowl of shoyu ramen with a close and a favorite button, the description and the price $12.90, a Choose a size choice between Regular and Large, Add extras switches for Extra egg and Chili oil, and an Add to cart barFoodie app Dish screen in dark mode: a sheet over a bowl of shoyu ramen with a close and a favorite button, the description and the price $12.90, a Choose a size choice between Regular and Large, Add extras switches for Extra egg and Chili oil, and an Add to cart bar
Dish

What does each system call it?

The same idea under its Apple, Material 3 and Appetite UI name.

Names, system, name
SystemName
AppleSheet
Material 3Bottom sheet
Appetite UIModal Sheet

What value does it take on iOS and Android?

Read from the kit’s Platform collection and its Material 3 pages, as the docs print them.

Platform variables, variable, iOS, Android
VariableiOS (ios-md)Android
platform/sheet/corner1228
Counterparts, component, iOS, Material 3, what differs
ComponentiOSMaterial 3What differs
SheetiOS / Sheet - Full ScreenM3 / Bottom sheet 412 wide and Side Sheet 320 wideMaterial 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.