BottomSheet

Bottom sheets present modal content from the bottom edge of the viewport using the native <dialog> element. Page scrolling behind the sheet is locked while it is open.

Share

Choose where this item should be shared.

Close lifecycle

update:open(false) and close run when the native dialog closes. Use closed for cleanup that must wait until the sheet is no longer visible. It is emitted after the BottomSheet-owned exit motion, including its backdrop, finishes and receives the same native dialog return value as close. It does not wait for animations inside slot content. With no motion or reduced motion, it follows asynchronously without a business timeout.

<BottomSheet v-model:open="open" @closed="selectedItem = null">
  {{ selectedItem?.name }}
  <template #actions>
    <Button variant="text" @click="open = false">Close</Button>
  </template>
</BottomSheet>

Keep content or payload state intact in close and while setting open to false; clear it from closed.

Layout

The sheet surface owns the background, shape, elevation, and motion. Default spacing is applied to the headline, content, and actions parts instead of the surface, so custom full-bleed content can opt out by overriding the relevant part padding.

Scrollable content also preserves common descendant visual overflow at its block edges. See Scrollable Content Visual Overflow for the shared surface contract and its customization token.

Examples

Default

Share

Choose where this item should be shared.

No Handle

Compact sheet

This sheet hides the drag handle and caps the surface height.

Reference

Anatomy

Highlight

Element	Part	Selector
<dialog>	root	[data-scope="bottom-sheet"][data-part="root"] left_clickLMBCopy
<div>	surface	[data-scope="bottom-sheet"][data-part="surface"] left_clickLMBCopy
<div>	drag-handleconditional	[data-scope="bottom-sheet"][data-part="drag-handle"] left_clickLMBCopy
<h2>	headlineconditional	[data-scope="bottom-sheet"][data-part="headline"] left_clickLMBCopy
<div>	contentconditional	[data-scope="bottom-sheet"][data-part="content"] left_clickLMBCopy
<div>	actionsconditional	[data-scope="bottom-sheet"][data-part="actions"] left_clickLMBCopy

Props

Name	Description	Default	Control
shapeOptional	Corner style; inherits the shared shape default. M3Shape | undefined	-	-
closeOnBackdropOptional	Whether clicking the backdrop closes the sheet. boolean | undefined	true	check
showDragHandleOptional	Whether to show the Material drag handle. boolean | undefined	true	check
maxHeightOptional	Maximum block size of the sheet surface. Such as '80vh'. string | undefined	undefined
openOptional	- boolean | undefined	false

Events4

Name	Type	Description
close	[returnValue: string]	-
update:open	[value: boolean]	-
cancel	[event: Event]	-
closed	[returnValue: string]	-

Slots3

Name	Parameters	Description
headline	-	Optional sheet headline.
default	-	Sheet body content.
actions	-	Optional action row.

Styling15

Preview

Token	Description
--md-bottom-sheet-background-extensionStyle Fallback0px	Controls background extension.
--md-bottom-sheet-drag-offsetLayout Fallback0px	Controls drag offset.
--md-bottom-sheet-max-heightLayout Fallbackcalc(100vb - 3rem)	Controls max height.
--md-bottom-sheet-translate-offsetLayout Fallback0px	Controls translate offset.
--md-sheet-bottom-docked-container-colorColor Fallbackvar(--md-sys-color-surface-container-low)	Controls bottom docked container color.
--md-sheet-bottom-docked-container-shapeShape Fallbackvar(--md-shape-overlay-top)	Controls bottom docked container shape.
--md-sheet-bottom-docked-drag-handle-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls bottom docked drag handle color.
--md-sheet-bottom-docked-drag-handle-heightLayout Fallback0.25rem	Controls bottom docked drag handle height.
--md-sheet-bottom-docked-drag-handle-widthLayout Fallback2rem	Controls bottom docked drag handle width.
--md-sheet-bottom-docked-minimized-container-shapeShape Fallbackvar(--md-shape-docked)	Controls bottom docked minimized container shape.
--md-sheet-bottom-docked-modal-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls bottom docked modal container elevation.
--md-sheet-bottom-docked-standard-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls bottom docked standard container elevation.
--md-sheet-bottom-focus-indicator-colorFocus Fallbackvar(--md-sys-color-secondary)	Controls bottom focus indicator color.
--md-sheet-bottom-focus-indicator-outline-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-outer-offset)	Controls bottom focus indicator outline offset.
--md-sheet-bottom-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls bottom focus indicator thickness.