BottomSheet

MD3 modal bottom sheet: slides up from the bottom edge over a scrim, with 28dp top corners and a drag handle. Scrim click, Escape, the drag handle, or dragging the sheet down dismisses it.

const [open, setOpen] = useState(false)

<Button onClick={() => setOpen(true)}>Open bottom sheet</Button>
<BottomSheet open={open} onClose={() => setOpen(false)} aria-label="Share">
  <List>
    <ListItem headline="Copy link" onClick={copyLink} />
    <ListItem headline="Send by email" onClick={sendEmail} />
  </List>
</BottomSheet>

Dragging to dismiss

Drag the sheet down with a pointer: releasing it past 56px, or flinging it down faster than 125px/s, dismisses it (Compose ModalBottomSheet thresholds); otherwise it settles back. Hide the drag handle with showDragHandle={false} — the sheet can still be closed by the scrim and Escape.

<BottomSheet open={open} onClose={close} showDragHandle={false}>
  …
</BottomSheet>

Accessibility

• The sheet is a role="dialog" with aria-modal. Name it with aria-label or aria-labelledby (default name: "Bottom sheet").
• While open, focus moves into the sheet and is trapped there, the rest of the page is inert, and body scroll is locked; on close, focus returns to the element that opened it.
• The drag handle is a real button (Enter / click dismisses); relabel it with dragHandleLabel (default "Close").
• Dragging is a pointer-only enhancement: every dismissal path also works from the keyboard.

Props

Prop	Type	Default	Description
dragHandleLabel	string	Close	Accessible label for the drag handle button.
onClose	(() => void)	—	Called on scrim click, Escape, drag-to-dismiss, or the drag handle.
open *	boolean	—	Whether the sheet is shown.
showDragHandle	boolean	true	Show the top drag handle.