Dialog
A flexible overlay for showing messages, forms, or actions. Keeps focus on content while allowing clear, user-friendly interactions.
Confirmation
Custom Content
Modal
Interactive Content
Props
| Name | Default | Type |
|---|---|---|
modelValue* | - | boolean Controls whether the dialog is open (v-model) |
options | {} | DialogOptions Configuration options for title, message, size, icon, actions, etc. |
disableOutsideClickToClose | false | boolean Prevents closing the dialog when clicking outside |
Slots
| Slot | Payload |
|---|---|
body | - Main body content of the dialog, overrides body-header and body-content |
body-header | - Header section inside the dialog body |
body-title | - Title section inside the header |
body-content | - Main content section inside the body |
actions | { close: () => void; } Actions section at the bottom of the dialog; exposes `{ close }` |
Emit Events
| Event | Payload |
|---|---|
update:modelValue | [value: boolean] |
close | [] |
after-leave | [] |