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.


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



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.