Overlays

BottomSheet

A panel that slides up from the bottom edge, common on touch layouts.

Install

import { BottomSheet } from 'vael-ui'

Playground

import { BottomSheet } from 'vael-ui'

<BottomSheet title="" initialSnap="" dismissible width="full" :fullScreen="false" closeOnEsc closeOnOverlay modal :closeOnHistoryBack="false">BottomSheet</BottomSheet>

Props

Name	Type	Default	Description
`title`	`string \| undefined`		Renders the default header with built-in close button.
`snapPoints`	`SheetSnapPoint[] \| undefined`		Ordered smallest to largest. Default: 60% / 92% of viewport height. Ignored when `fullScreen` is set and this is left unspecified.
`initialSnap`	`string \| undefined`		Which snap point to open at. Defaults to the first (smallest).
`dismissible`	`boolean \| undefined`	`true`	Whether dragging past the smallest snap point closes the sheet. Default true.
`width`	`"md" \| "sm" \| "lg" \| "full"`	`"full"`	Panel width: `full` spans edge to edge, `sm`/`md`/`lg` cap and center it. Default: `full`.
`fullScreen`	`boolean \| undefined`	`false`	Single snap point covering entire viewport height. Shorthand for `snapPoints=[{ id: 'full', height: 1 }]`.
`closeOnEsc`	`boolean \| undefined`	`true`	Escape key closes the sheet.
`closeOnOverlay`	`boolean \| undefined`	`true`	Clicking the overlay closes the sheet.
`modal`	`boolean \| undefined`	`true`	Dims the background and traps focus/scroll, like Dialog's own `modal`. Set `false` for an always-open, non-dismissible panel docked beside other interactive content (e.g. a persistent list next to a live map) — the overlay becomes fully transparent and inert instead of blocking the page behind it. Default true.
`closeOnHistoryBack`	`boolean \| undefined`	`false`	Pushes a history entry on open so the mobile hardware/gesture back action closes this sheet instead of navigating the page away. Default false.
`beforeClose`	`((done: () => void) => void) \| undefined`		Custom exit animation; call `done()` when complete. Fires for all close paths.
`ui`	`Partial<{ overlay: UiPartValue; panel: UiPartValue; handleZone: UiPartValue; handle: UiPartValue; header: UiPartValue; title: UiPartValue; close: UiPartValue; content: UiPartValue; }> \| undefined`		Per-instance part-class/style overrides.
`open`	`boolean \| undefined`	`false`	Whether the sheet is open.

Slots

Name	Type	Description
`default`	`{ activeSnap: string \| null; isDragging: boolean; isClosing: boolean; close: () => void; }`
`header`	`{ close: () => void; }`	Replaces the default title + close-button row entirely.

Events

Name	Type	Description
`update:open`	`[value: boolean]`

Exposed

Name	Type	Description
`panelEl`	`HTMLElement \| null`
`activeSnap`	`string \| null`
`isDragging`	`boolean`
`isClosing`	`boolean`
`close`	`() => void`
`cancelClose`	`() => void`