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
Extends div HTML attributes.
| Property | Type | Default | Description |
|---|
open | boolean | undefined | — | Whether the component is open (controlled). |
defaultOpen | boolean | — | Whether the component is initially open (uncontrolled). |
onOpenChange | ((open: boolean, eventDetails: { reason: OpenChangeReason }) => void) | undefined | — | Event handler called when the open state changes. |
children | Snippet<[{ open: boolean }]> | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-closed | Present when the part is closed. |
data-open | Present when the part is open. |
Dialog.Backdrop
Extends div HTML attributes.
| Property | Type | Default | Description |
|---|
render | string | — | HTML element tag to render instead of the default host element. |
children | Snippet | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-closed | Present when the part is closed. |
data-open | Present when the part is open. |
Dialog.Close
Extends button HTML attributes.
| Property | Type | Default | Description |
|---|
render | string | — | HTML element tag to render instead of the default host element. |
children | Snippet | — | Content rendered inside the part. |
Dialog.Description
Extends paragraph HTML attributes.
| Property | Type | Default | Description |
|---|
children | Snippet | — | Content rendered inside the part. |
Dialog.Popup
Extends div HTML attributes.
| Property | Type | Default | Description |
|---|
render | string | — | HTML element tag to render instead of the default host element. |
children | Snippet | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-closed | Present when the part is closed. |
data-ending-style | Present while the exit animation can run. |
data-open | Present when the part is open. |
data-starting-style | Present while the enter animation can run. |
Dialog.Portal
| Property | Type | Default | Description |
|---|
children | Snippet | — | Content rendered inside the part. |
Dialog.Title
Extends heading HTML attributes.
| Property | Type | Default | Description |
|---|
children | Snippet | — | Content rendered inside the part. |
Dialog.Trigger
Extends button HTML attributes.
| Property | Type | Default | Description |
|---|
render | string | — | HTML element tag to render instead of the default host element. |
disabled | boolean | false | Whether the control ignores user interaction. |
children | Snippet | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-closed | Present when the part is closed. |
data-disabled | Present when the part is disabled. |
data-open | Present when the part is open. |
Dialog.Viewport
Extends div HTML attributes.
| Property | Type | Default | Description |
|---|
render | string | — | HTML element tag to render instead of the default host element. |
children | Snippet | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-closed | Present when the part is closed. |
data-open | Present when the part is open. |