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.

If you want to programmatically open or close the dialog, you can do so by using v-model with a boolean value. Keep in mind, if the trigger for the opening is not contained within the activator slot and is done so by a click, you must stopPropagation to avoid immediately triggering a close event.

Go to api


Choosing an option immediately commits the option and closes the menu. Touching outside of the dialog, or pressing Back, cancels the action and closes the dialog.

If for some reason you are unable to use the activator slot, be sure to add the .stop modifier to the event that triggers the dialog.

Similar to a Simple Dialog, except that it's not dismissed when touching outside.

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

Just a simple example of a form in a dialog.

Example of a dialog with scrollable content.

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