UnreviewedOptional UnreviewedheaderHeader content: a title, or any node. Rendered in the top zone. Omit for a chromeless dialog with only a body.
Optional UnreviewedfooterFooter content, usually the action buttons. Rendered in the bottom zone as a right-aligned row (wraps under pressure). Omit for none.
Optional UnreviewedchildrenThe dialog body. Scrolls when it overflows the available height.
Optional UnreviewedpositionPlacement. center (the default) is a centered modal; left / right /
top / bottom turn it into an edge drawer (full height for left/right,
full width for top/bottom); fullscreen fills the whole viewport with no
edge gap or corner radius.
Optional UnreviewedclosableWhether the top-right ✕ button is present. It's one way to close the dialog,
alongside Esc, the backdrop, a data-dialog-close / footer action, and your
own code; false removes the ✕ without making the dialog unclosable.
Optional UnreviewedpersistentTurn off light-dismiss: a backdrop click and Esc no longer close the dialog.
It stays closable through explicit controls (the ✕ when closable, a footer
action, your own code); persistent isn't "un-closable", it stops an
accidental click or stray Esc from dismissing. For an alert / confirm that
should be answered deliberately. Omit for the default dismissible behavior.
Optional UnreviewedroundCorner radius. A side keyword — 'top' / 'right' / 'bottom' / 'left' —
rounds only that edge's two corners (at --dialog-radius), which pairs with
a drawer's exposed edge (a bottom sheet → 'top', a right drawer → 'left').
A number (px) or CSS string rounds all corners at that value; the string
may be a full border-radius shorthand ('12px 12px 0 0'). true rounds all
corners at --dialog-radius. Omit for the position default: center is
rounded, drawers and fullscreen are square.
Optional UnreviewedopenControlled open state. When provided, the consumer owns open/close: the
dialog only follows this prop, and every user dismiss (Esc, backdrop, close
button) requests a change via onStateChange (reject by not updating).
Leave undefined for uncontrolled.
Optional UnrevieweddefaultInitial open state for the uncontrolled case (read once on mount).
Optional UnreviewednameUncontrolled trigger name. Any element with data-dialog-open="{name}"
opens this dialog, data-dialog-close="{name}" closes it. A convenience for
triggers rendered elsewhere; ignored in controlled mode.
Optional UnreviewedonFired before the open state changes, on every user open or dismiss.
event is the cancelable statechange: call event.preventDefault() to
veto an uncontrolled transition. detail.next is the requested open
state, detail.prev the current one (booleans). In controlled mode, apply
detail.next to open to accept, or do nothing to reject.
Optional UnreviewedclassCSS class on the component's root element (merged with the component's own
classes). Use it directly for layout and positioning — grid/flex placement,
margins, alignment — rather than wrapping the component in a <div>/<span>.
Optional UnreviewedstyleInline styles on the component's root element. Set layout/positioning here
(or via className) directly on the component instead of adding a wrapper.
Optional UnreviewedidHTML id attribute.
Optional UnreviewedslotAssigns the element to a named <slot> of a parent web component (e.g.
slot="header" inside a <Card>, slot="footer" inside a <Dialog>).
Optional UnreviewedtabTab order. Set to -1 to skip the element when tabbing.
Optional UnreviewedkeyReact/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).
Public props for the
<Dialog>modal / drawer.headerandfooterare the chrome zones;childrenis the (scrollable) body.