Alert Dialog · base-ui-svelte

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.

AlertDialog.Root

Groups all parts of the alert 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 AlertDialogModal true

Name: modal
Description: —
Type: AlertDialogModal
Default: true

disablePointerDismissal boolean false

Name: disablePointerDismissal
Description: —
Type: boolean
Default: false

onOpenChangeComplete function —

Name: onOpenChangeComplete
Description: Event handler called after any animations complete when the dialog is opened or closed.
Type: ((open: boolean) => void) | undefined

handle AlertDialogHandle —

Name: handle
Description: Imperative handle from .
Type: AlertDialogHandle | 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.

AlertDialog.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: Whether the backdrop is forced to render even when nested.
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.

AlertDialog.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

AlertDialog.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

AlertDialog.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.

AlertDialog.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

AlertDialog.Title

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

Props

children snippet —

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

AlertDialog.Trigger

A button that opens the alert 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 DialogRoot triggerId prop).
Type: string | undefined

handle AlertDialogHandle —

Name: handle
Description: Same handle as Root — enables triggers outside the Root tree.
Type: AlertDialogHandle | 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.

AlertDialog.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.