You are viewing the documentation for Vuetify 3
Go to Vuetify 2

Bottom sheets

The bottom sheet is a modified v-dialog that slides from the bottom of the screen, similar to a v-bottom-navigation.


Whereas a bottom navigation component is for buttons and specific application level actions, a bottom sheet is meant to contain anything.


v-bottom-sheetPrimary Component


The recommended components to use inside of a v-bottom-sheet are:

Element / AreaDescription
1. ContainerThe bottom sheet is a dialog that animates from the bottom of the screen


The v-bottom-sheet component is a modified v-dialogthat slides from the bottom of the screen. It is used for elevating content above other elements in a dialog style fashion. The bottom sheet can be controlled using the v-model prop or through the activator slot.

The following code snippet is an example of a basic v-bottom-sheet component:

    title="Bottom Sheet"
    text="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut, eos? Nulla aspernatur odio rem, culpa voluptatibus eius debitis."


The v-bottom-sheet component has access to all of the props available in v-dialog.


The v-model (or model-value) controls the visibility of the bottom sheet:

This also works in tandem with the activatorslot.


With the inset prop, reduce the maximum width of the content area on desktop to 70%. This can be further reduced manually using the width prop.


The v-bottom-sheet component has access to all of the slots available in v-dialog.

1. DefaultThe default slot
2. ActivatorThe activator slot is used to open the bottom sheet


The following are a collection of examples that demonstrate more advanced and real world use of the v-bottom-sheet component.

Music Player

Using a inset bottom sheet, you can make practical components such as this simple music player.

Open In List

By combining a functional list into a bottom sheet, you can create a simple ‘open in’ component.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub