Dialogs

The v-dialog component inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. Use dialogs sparingly because they are interruptive.

Usage

In this basic example we use the activator slot to render a button that is used to open the dialog. When using the activator slot it is important that you bind the props object from the slot (using v-bind) to the element that will activate the dialog. See the examples below for more ways of activating a dialog.

v-dialog/usage.vue

API

Examples

Props

Activator

In addition using the activator slot, we can instead use the activator prop to activate a dialog. By placing the dialog component inside the button, and setting the activator prop value to “parent” we can designate the parent (button) as the activator.

v-dialog/prop-activator.vue

v-model

You can also trigger a dialog by simply updating the v-model, without using either activator slot or prop. In this case, the dialog will not appear to be activated by any specific element, and will simply appear in the middle of the screen.

v-dialog/prop-model.vue

Fullscreen

Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens.

v-dialog/prop-fullscreen.vue

Transitions

You can make the dialog appear from the top or the bottom.

v-dialog/prop-transitions.vue

Persistent

Persistent dialogs are not dismissed when touching outside or pressing the esc key.

v-dialog/prop-persistent.vue

Scrollable

Example of a dialog with scrollable content.

v-dialog/prop-scrollable.vue

Misc

Form

A simple example of a form in a dialog.

v-dialog/misc-form.vue

Loader

The v-dialog component makes it easy to create a customized loading experience for your application.

v-dialog/misc-loader.vue

Nesting

Dialogs can be nested: you can open one dialog from another.

v-dialog/misc-nesting.vue

Overflowed

Modals that do not fit within the available window space will scroll the container.

v-dialog/misc-overflowed.vue

Ready for more?

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