Bottom Sheet Component

Bottom sheet Element

Properties

Name	Type	Default	Description
open	boolean	false	Controls the visibility of the bottom sheet. If true, the bottom sheet is visible.
dismissible	boolean	true	Determines whether the bottom sheet can be dismissed by the user. If true, a close button is displayed, allowing the bottom sheet to be closed.
hasDimmer	boolean	false	Controls the presence of a dimmer overlay.
title	string	''	Specifies the title displayed in the header of the bottom sheet.
expanded	boolean	false	If true, the bottom sheet expands to 90% of the viewport height (90vh).
showGrabber	boolean	true	Controls the visibility of the grabber element.

Slots

Name	Description
bottom-sheet-body	The content of the bottom sheet's body.
bottom-sheet-header	The bottom sheet's header part.

CSS Parts

Name	Description
dimmer	The dimmer element darkens the background and is clickable to close the bottom sheet.
header	The header of the bottom sheet component, containing the title and dismiss button.
body	The container that wraps the bottom sheet's content.

Check this link to learn how to use CSS parts for Bottom Sheet Component.

CSS Properties

Token	Default	Description
--tap-bottom-sheet-bottom	0	-
--tap-bottom-sheet-header-padding	0	-
--tap-bottom-sheet-header-padding	12px	-
--tap-bottom-sheet-background	--tap-sys-color-surface-primary	-
--tap-bottom-sheet-content-overflow-y	scroll	-

Events

Name	Description
close	Fires when the bottom sheet closes.