Bottom sheet

A modal surface that rises from the bottom edge — the touch idiom for the tasks a desktop would put in a Dialog, Popover, Menu or Select. Built on Base UI's Dialog, so the focus trap, scroll lock, escape and outside dismissal come for free.

<BottomSheet>  <BottomSheetTrigger render={<Button size="touch">Filter</Button>} />  <BottomSheetContent>    <BottomSheetHeader>      <BottomSheetTitle>Filter</BottomSheetTitle>      <BottomSheetDescription>Narrow the list.</BottomSheetDescription>    </BottomSheetHeader>    <BottomSheetBody>{/* options */}</BottomSheetBody>    <BottomSheetFooter>      <BottomSheetClose render={<Button variant="secondary" size="touch">Cancel</Button>} />      <BottomSheetClose render={<Button variant="primary" size="touch">Apply</Button>} />    </BottomSheetFooter>  </BottomSheetContent></BottomSheet>

Live

Tap the filter icon in the header to raise the sheet. It rises from the bottom, rounds only its top corners, shows a drag handle, and clears the home indicator.

Parts

Prop	Type	Default	Notes
`BottomSheet`	`Root`	—	State container (open, defaultOpen, onOpenChange).
`BottomSheetTrigger`	`render`	—	Opens the sheet; wrap a Button.
`BottomSheetContent`	`hideHandle? hideCloseButton?`	—	The bottom-anchored panel.
`BottomSheetHeader / Title / Description`	`—`	—	Titled header, wired to the dialog aria.
`BottomSheetBody`	`—`	—	Scrolling region for tall content.
`BottomSheetFooter`	`—`	—	Action row.
`BottomSheetClose`	`render`	—	Dismisses the sheet.