Bottom sheet

The bottom sheet is a modified v-dialog that slides from the bottom of the screen, similar to a v-bottom-nav. Whereas a bottom navigation component is for buttons and specific application level actions, a bottom sheet can contain anything.

Usage

Here we display an example list of actions that could be present in an application.

API

v-bottom-sheet
Name
disabled
Default
false
Type
boolean

Disables the ability to open the dialog

Name
full-width
Default
false
Type
boolean

Forces 100% width

Name
hide-overlay
Default
false
Type
boolean

Hide the display of the overlay

Name
inset
Default
false
Type
boolean

Reduces the dialog content maximum width to 70%

Name
lazy
Default
false
Type
boolean

Conditionally renders content on mounted. Will only render content if activated

Name
max-width
Default
auto
Type
string | number

Specify the maximum width of the sheet's container

Name
persistent
Default
false
Type
boolean

Clicking outside will not dismiss the dialog

Name
value
Default
undefined
Type
any

Controls visibility

Examples

Inset bottom sheets

Bottom sheets can be inset, reducing their maximum width on desktop to 70%. This can be further reduced manually using the width prop. We also showcase dynamic class binding using the Vuetify breakpoint object.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore