Modal

Dialog overlay that focuses attention on a task or message above the current page. Use modals for confirmations, forms, and details that need temporary focus.

#
Usage

Basic example with common props.

#
Composed

Modal with header, body, and footer slots.

#API

Name	Description	Type	Default	Values
size	Dialog width preset (xs, sm, md, lg, xl, full).	String	lg	xssmmdlgxlfull
position	Vertical placement of the dialog (top, center, bottom).	String	center	topcenterbottom
modelValue	Open state (v-model).	Boolean	false
showClose	Shows a close button in the corner.	Boolean	false
backdrop	Shows a dimmed backdrop behind the dialog.	Boolean	true
hasActions	Renders the default actions footer region when no footer slot is used.	Boolean	true
hasHeader	Renders the default header region when no header slot is used.	Boolean	true
title	Header title text.	String
description	Body description shown above the default slot.	String
label	Small label above the title in the header.	String
loading	Loading state for the modal (theme/visual).	Boolean	false
loadingText	Text shown while loading.	String
fluid	Stretches the dialog to fill available width within its size.	Boolean	false
isForm	Wraps content in x-form and enables form submit handling.	Boolean	false
formDisabled	Disables the inner form when `isForm` is set.	Boolean	false
formDescription	Description passed to the inner form when `isForm` is set.	String
formTitle	Title passed to the inner form when `isForm` is set.	String
formAutoValidate	Auto-validate the inner form on submit when `isForm` is set.	Boolean	true
formErrors	External form errors passed to the inner form when `isForm` is set.	Array Object	() => []
persistent	Prevents closing on Escape or backdrop click.	Boolean	false

Name	Description
default	Main modal body content.
image	Optional media above the header.
header	Replaces the default header region.
header-content	Custom header content inside the default header layout.
footer	Replaces the default actions footer.
actions	Custom actions row inside the default footer.
cancel-action	Cancel / dismiss control in the actions row.
tertiary-action	Tertiary action control in the actions row.
secondary-action	Secondary action control in the actions row.
primary-action	Primary action control in the actions row.

Name	Description
update:modelValue	Emitted when open state changes (v-model).
submit	Emitted when the inner form submits. Payload is the validation result.

Name	Description
open	Open the modal.
close	Close the modal.

notifications

Modal

#Usage

#Composed

#API

Modal

props

slots

emits

methods

#
Usage

#
Composed