Dialog

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.


Examples

#1 Simple dialogs
edit
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.

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

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

#4 Form
edit
Just a simple example of a form in a dialog.

#5 Scrollable
edit
Example of a dialog with scrollable content.

API

chevron_leftchevron_right