Components / Overlays / Bottom sheetOpen in Figma

Bottom sheet

Ready

A panel that slides up over the screen for a short choice or a small task, without leaving the page.

Platforms Phone · TabletGroup OverlaysUpdated 26 Oct 2026

When to use

  • Choose one option from a short list, or fill in one or two fields, without leaving the screen.
  • A dropdown or date field opens its choices.
  • Show a short list of facts about something on the screen.

When not to use

If people need toUse
Ask people to confirm something that can't be undoneConfirm
Narrow a long list by several categoriesFilter screen
Fill in a long formA full form screen
Pick actions for a recordMenu

Anatomy

Titleclose
Optionradio_button_checked
Optionradio_button_unchecked
  1. Handle · only when the sheet can be dragged
  2. Title bar · required
  3. Title · required, left
  4. Close · required unless the sheet has a handle
  5. Body · required, Pale green
  6. Option row · when the sheet offers a choice
  7. Selected mark · on the chosen row
  8. Footer · when the sheet needs a decision

Variants

VariantPurposeFigma
Two buttonsCancel and the action side by side, half each: the standardDesigned
One buttonA single decision; one full-width actionDesigned
DraggableA handle on top; the sheet can be pulled up or downDesigned

States

StateWhenWhat changesFigma
Nothing chosenThe sheet just openedAction button is disabledTemporary rule
Option chosenAn option is picked1px Antz green border, Field fill and a filled radio on the row; action enabledDesigned

Behaviour

  • Opens by sliding up, 260 ms. Respects reduced motion.
  • Tapping the backdrop, the close icon or Cancel closes it and drops unsaved changes.
  • Choices are saved only with the action button.
  • The body scrolls inside the sheet; the title bar and footer stay put. The sheet is never taller than 90% of the screen.
  • Only one sheet at a time; a sheet never opens another sheet.

Phone and tablet

PhoneTablet
WidthFull screen widthFull screen width
Footer buttonsSide by side, half eachSide by side, half each

Content

PartRule
TitleSays what is being chosen or done, in two or three words
OptionName in 16 Medium; optional detail in 14 Regular Muted
Action buttonA verb for the result, such as "Save" or "Apply"; not "OK"

Do and don't

Titleclose
DoName the action with a verb.
Titleclose
Don'tUse "OK" and "No".
Titleclose
Option
DoShow a handle only when the sheet can be dragged.
Titleclose
Option
Don'tAdd a handle to a fixed sheet.
ConfirmFilter screenDropdownMenuButton
← Stat tileConfirm →