Dialog · base-ui-svelte

Sizes

API Reference

Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also accepted unless noted.

Dialog.Root

Groups all parts of the dialog. Doesn't render its own HTML element.

Props

open boolean —

Name: open
Description: Whether the component is open (controlled).
Type: boolean | undefined

defaultOpen boolean false

Name: defaultOpen
Description: Whether the component is initially open (uncontrolled).
Type: boolean
Default: false

onOpenChange function —

Name: onOpenChange
Description: Event handler called when the open state changes.
Type: ((open: boolean, eventDetails: { reason: OpenChangeReason }) => void) | undefined

modal DialogModal true

Name: modal
Description: Whether the dialog enters a modal state when open. - true: focus trap, aria-modal, document scroll locked, page interaction limited - false: no focus trap / aria-modal / scroll lock - 'trap-focus': focus trap without aria-modal or scroll lock
Type: DialogModal
Default: true

disablePointerDismissal boolean false

Name: disablePointerDismissal
Description: Prevents closing on outside presses (and backdrop click).
Type: boolean
Default: false

onOpenChangeComplete function —

Name: onOpenChangeComplete
Description: Called after open/close animations complete.
Type: ((open: boolean) => void) | undefined

handle DialogHandle —

Name: handle
Description: Imperative handle from .
Type: DialogHandle | undefined

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ open: boolean; payload: unknown }]>

Data attributes

Attribute	Description
`data-closed`	Present when the part is closed.
`data-open`	Present when the part is open.

Dialog.Backdrop

An overlay displayed beneath the popup. Renders a <div> element.

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

forceRender boolean false

Name: forceRender
Description: Keep the backdrop mounted while closed (for exit animations).
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the dialog is closed.
`data-ending-style`	Present when the dialog is animating out.
`data-open`	Present when the dialog is open.
`data-starting-style`	Present when the dialog begins animating in.

Dialog.Close

A button that closes the dialog. Renders a <button> element.

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Dialog.Description

A paragraph with additional information about the dialog. Renders a <p> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Dialog.Popup

A container for the dialog contents. Renders a <div> element.

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

initialFocus FocusTarget —

Name: initialFocus
Description: Determines the element to focus when the dialog is opened. By default, focus moves to the first tabbable element inside the popup, except when the dialog is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard. false: Do not move focus.true: Move focus based on the default behavior (first tabbable element or popup).RefObject: Move focus to the ref element.function: Called with the interaction type (mouse, touch, pen, or keyboard). Return an element to focus, true to use the default behavior, null to fall back to the default behavior, or false/undefined to do nothing.
Type: FocusTarget

finalFocus FocusTarget —

Name: finalFocus
Description: Determines the element to focus when the dialog is closed. false: Do not move focus.true: Move focus based on the default behavior (trigger or previously focused element).RefObject: Move focus to the ref element.function: Called with the interaction type (mouse, touch, pen, or keyboard). Return an element to focus, true to use the default behavior, null to fall back to the default behavior, or false/undefined to do nothing.
Type: FocusTarget

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the dialog is closed.
`data-ending-style`	Present when the dialog is animating out.
`data-open`	Present when the dialog is open.
`data-starting-style`	Present when the dialog begins animating in.

Dialog.Portal

A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to <body>. Renders a <div> element.

Props

container HTMLElement | string | null —

Name: container
Description: A parent element to render the portal element into.
Type: HTMLElement | string | null

keepMounted boolean false

Name: keepMounted
Description: Whether to keep the portal mounted in the DOM while the popup is hidden.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Dialog.Title

A heading that labels the dialog. Renders an <h2> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Dialog.Trigger

A button that opens the dialog. Renders a <button> element.

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

id string —

Name: id
Description: ID of the trigger. In addition to being forwarded to the rendered element, it is also used to specify the active trigger for the dialog in controlled mode (with the Dialog.Root triggerId prop).
Type: string | undefined

handle DialogHandle —

Name: handle
Description: Same handle as Root — enables triggers outside the Root tree.
Type: DialogHandle | undefined

payload unknown —

Name: payload
Description: Optional payload associated when opening via this trigger.
Type: unknown

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the part is closed.
`data-disabled`	Present when the trigger is disabled.
`data-open`	Present when the part is open.

Dialog.Viewport

A positioning container for the dialog popup that can be made scrollable. Renders a <div> element.

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the dialog is closed.
`data-open`	Present when the dialog is open.