Dialog

Dialogs are modal windows that appear in front of the main content to provide critical information or ask for decisions.

Usage

Import and use the Dialog components:

<Dialog :open="isOpen" @update:open="isOpen = $event">
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog description here.</DialogDescription>
    </DialogHeader>
    <div>Dialog content here</div>
  </DialogContent>
</Dialog>

Examples

Basic Dialog

Destructive Dialog

Form Dialog

Props

Name

Type

Default

Description

open

boolean

false

Controls the visibility of the dialog

@update:open

function

Event emitted when dialog visibility changes

Best Practices

✓

Keep dialogs focused

Each dialog should focus on a single task or decision.

✓

Provide clear actions

Use descriptive labels for buttons and make the primary action clear.

✗

Don't nest dialogs

Avoid opening dialogs from within other dialogs.