Title
title is the heading in the modal header.
Description
description is secondary text below the title, for the sentence that frames what the modal is asking.
Size
size sets how wide the panel gets — sm is max-w-sm, md max-w-lg, lg max-w-2xl, xl max-w-4xl.
Fullscreen
fullscreen grows the panel to fill the viewport, inside the same small margin a centered modal keeps.
fullscreen and size are mutually exclusive in effect — fullscreen ignores size.
Non-dismissible needs its own close control
:dismissible="false" disables both Escape and backdrop-click close — you must provide your own way to close the modal (e.g. a footer button) or it's stuck open.
Dismissible
dismissible is on by default. Setting it false disables both Escape and the backdrop click, so the modal can only be closed by something you put inside it — the right call while there's unsaved work.
:dismissible="false" disables both the Escape key and backdrop-click close — you must provide your own way to close it (e.g. a footer button), or it's stuck open.
Padded
padded is the body's own padding and scrolling. Turn it off for content that has to run flush to the panel edges — a full-bleed image, a table, an embedded map.
:padded="false" drops the body's own padding *and* its scroll container, for content that runs flush to the panel edges (a split sidebar/detail layout, a full-bleed image) — that content then has to bring its own overflow-y-auto, or it will simply be clipped.
Open
Bind it with v-model:open so whatever triggers the modal owns whether it's showing.
Default open
defaultOpen starts the modal open when uncontrolled. It's shown as source only here: a modal that opened itself would cover this page.
Renders open on mount.
header slot
Replaces title and description wholesale, for a header that needs markup of its own.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
booleanfalsebooleantrueSlots
headerdefaultfooterEmits
update:open[value: boolean]