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.

Basic

A dialog contains two slots, one for its activator and one for its content (default). Good for Privacy Policies.

Persistent

Use persistent prop to create persistent dialog.

Scrollable

Use scrollable prop to create scrollable dialog.

Loader

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

Nesting

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

Overflowed

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

Fullscreen

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

Form

Just a simple example of a form in a dialog.

CONTENTS

  • Introduction

  • Basic

  • Persistent

  • Scrollable

  • Loader

  • Nesting

  • Overflowed

  • Fullscreen

  • Form