Bottom Sheet

A native <dialog>-backed panel anchored to the bottom edge, draggable via its grabber, with optional Apple Maps-style snap points. Compose BottomSheetHeader / BottomSheetBody / BottomSheetFooter as children, the same lookup-by-class approach Modal uses.

Usage


import { BottomSheet, BottomSheetHeader, BottomSheetBody } from '@mav-labs-inc/mavkit-react'
 
// Single, content-sized sheet
<BottomSheet open={isOpen} onClose={() => setIsOpen(false)}>
  <BottomSheetHeader>Share</BottomSheetHeader>
  <BottomSheetBody><p>…</p></BottomSheetBody>
</BottomSheet>
 
// Starts content-sized, expandable via drag/tap/Enter
<BottomSheet open={isOpen} onClose={() => setIsOpen(false)} snapPoints={['auto', 0.92]}>
  …
</BottomSheet>
 
// Apple Maps-style detents
<BottomSheet
  open={isOpen}
  onClose={() => setIsOpen(false)}
  snapPoints={[0.3, 0.6, 0.92]}
  snapIndex={snapIndex}
  onSnapIndexChange={setSnapIndex}
>
  …
</BottomSheet>

Examples

Basic

Snap points

Props

BottomSheet

Prop	Type	Default	Description
open*	boolean	—	Controlled open state. The sheet animates closed when this flips to false.
onClose	() => void	—	Called on backdrop click, ESC, grabber, or drag-to-dismiss. Set open to false here to actually close.
snapPoints	(number \| 'auto')[]	[]	Ascending detents — a fraction of viewport height (0, 1] or 'auto' for content's natural height. Omit for a single, content-sized sheet only draggable to dismiss.
snapIndex	number	—	Controlled index into snapPoints. Ignored when snapPoints has fewer than 2 entries.
defaultSnapIndex	number	the middle detent	Uncontrolled initial index into snapPoints.
onSnapIndexChange	(index: number) => void	—
snapLabel	(index: number, count: number) => string	—	aria-valuetext for the resize handle at a given index (multi-snap only). Defaults to "Position n of total".
dismissible	boolean	true	Whether backdrop click / Escape / drag-past-threshold / grabber Enter can dismiss the sheet.
bare	boolean	false	No backdrop, no body scroll lock, page stays interactive behind it. Uses dialog.show() so native ESC-to-close doesn't fire.
ariaLabel	string	—	aria-label for the dialog when no BottomSheetHeader title is rendered.
className	string	—
children	ReactNode	—

BottomSheetHeader

Prop	Type	Default	Description
closeLabel	string	'Close'	aria-label for the generated .bottom-sheet-close (×) button.
hideClose	boolean	false
children	ReactNode	—	Rendered as the .bottom-sheet-title.

BottomSheetBody / BottomSheetFooter

Thin wrappers rendering a <div> with .bottom-sheet-body / .bottom-sheet-footer — accept every native <div> attribute, no extra props of their own.