Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

<script setup lang="ts">
import { Dialog } from '@destyler-ui/vue'
</script>

<template>
  <Dialog.Root>
    <Dialog.Trigger>Open Dialog</Dialog.Trigger>
    <Teleport to="body">
      <Dialog.Backdrop />
      <Dialog.Positioner data-testid="positioner">
        <Dialog.Content>
          <Dialog.Title>Dialog Title</Dialog.Title>
          <Dialog.Description>Dialog Description</Dialog.Description>
          <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
        </Dialog.Content>
      </Dialog.Positioner>
    </Teleport>
  </Dialog.Root>
</template>

import { createPortal } from 'react-dom'
import { Dialog } from '@destyler-ui/react'

export function Basic(props: Dialog.RootProps) {
  return (
    <Dialog.Root {...props}>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      {createPortal(
        <>
          <Dialog.Backdrop />
          <Dialog.Positioner data-testid="positioner">
            <Dialog.Content>
              <Dialog.Title>Dialog Title</Dialog.Title>
              <Dialog.Description>Dialog Description</Dialog.Description>
              <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
            </Dialog.Content>
          </Dialog.Positioner>
        </>,
        document.body,
      )}
    </Dialog.Root>
  )
}

import { Dialog } from '@destyler-ui/solid/dialog'
import { Portal } from 'solid-js/web'

export function Basic() {
  return (
    <Dialog.Root open>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      <Portal>
        <Dialog.Backdrop />
        <Dialog.Positioner>
          <Dialog.Content>
            <Dialog.Title>Dialog Title</Dialog.Title>
            <Dialog.Description>Dialog Description</Dialog.Description>
            <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
    </Dialog.Root>
  )
}

<script lang="ts">
  import type { DialogRootProps } from '@destyler-ui/svelte'
  import { portal } from '@destyler-ui/svelte'
  import { Dialog } from '@destyler-ui/svelte'

  const props: DialogRootProps = $props()
</script>

<Dialog.Root {...props}>
  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
  <div use:portal>
    <Dialog.Backdrop />
    <Dialog.Positioner data-testid="positioner">
      <Dialog.Content>
        <Dialog.Title>Dialog Title</Dialog.Title>
        <Dialog.Description>Dialog Description</Dialog.Description>
        <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
      </Dialog.Content>
    </Dialog.Positioner>
  </div>
</Dialog.Root>

Anatomy

<script setup lang="ts">
import { Dialog } from '@destyler-ui/vue'
</script>

<template>
  <Dialog.Root>
    <Dialog.Trigger />
    <Dialog.Backdrop />
    <Dialog.Positioner>
      <Dialog.Content>
        <Dialog.Title />
        <Dialog.Description />
        <Dialog.CloseTrigger />
      </Dialog.Content>
    </Dialog.Positioner>
  </Dialog.Root>
</template>

import { Dialog } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Dialog.Root>
      <Dialog.Trigger />
      <Dialog.Backdrop />
      <Dialog.Positioner>
        <Dialog.Content>
          <Dialog.Title />
          <Dialog.Description />
          <Dialog.CloseTrigger />
        </Dialog.Content>
      </Dialog.Positioner>
    </Dialog.Root>
  )
}

import { Dialog } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Dialog.Root>
      <Dialog.Trigger />
      <Dialog.Backdrop />
      <Dialog.Positioner>
        <Dialog.Content>
          <Dialog.Title />
          <Dialog.Description />
          <Dialog.CloseTrigger />
        </Dialog.Content>
      </Dialog.Positioner>
    </Dialog.Root>
  )
}

<script lang="ts">
  import { Dialog, portal } from '@destyler-ui/svelte'
</script>

<Dialog.Root>
  <Dialog.Trigger>Open dialog</Dialog.Trigger>
  <div use:portal>
    <Dialog.Backdrop />
    <Dialog.Positioner>
      <Dialog.Content>
        <Dialog.Title>Dialog title</Dialog.Title>
        <Dialog.Description>Dialog description</Dialog.Description>
        <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
      </Dialog.Content>
    </Dialog.Positioner>
  </div>
</Dialog.Root>

Examples

Basic

<script setup lang="ts">
import { Dialog } from '@destyler-ui/vue'
</script>

<template>
  <Dialog.Root>
    <Dialog.Trigger>Open Dialog</Dialog.Trigger>
    <Teleport to="body">
      <Dialog.Backdrop />
      <Dialog.Positioner data-testid="positioner">
        <Dialog.Content>
          <Dialog.Title>Dialog Title</Dialog.Title>
          <Dialog.Description>Dialog Description</Dialog.Description>
          <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
        </Dialog.Content>
      </Dialog.Positioner>
    </Teleport>
  </Dialog.Root>
</template>

import { createPortal } from 'react-dom'
import { Dialog } from '@destyler-ui/react'

export function Basic(props: Dialog.RootProps) {
  return (
    <Dialog.Root {...props}>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      {createPortal(
        <>
          <Dialog.Backdrop />
          <Dialog.Positioner data-testid="positioner">
            <Dialog.Content>
              <Dialog.Title>Dialog Title</Dialog.Title>
              <Dialog.Description>Dialog Description</Dialog.Description>
              <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
            </Dialog.Content>
          </Dialog.Positioner>
        </>,
        document.body,
      )}
    </Dialog.Root>
  )
}

import { Dialog } from '@destyler-ui/solid/dialog'
import { Portal } from 'solid-js/web'

export function Basic() {
  return (
    <Dialog.Root open>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      <Portal>
        <Dialog.Backdrop />
        <Dialog.Positioner>
          <Dialog.Content>
            <Dialog.Title>Dialog Title</Dialog.Title>
            <Dialog.Description>Dialog Description</Dialog.Description>
            <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
    </Dialog.Root>
  )
}

<script lang="ts">
  import type { DialogRootProps } from '@destyler-ui/svelte'
  import { portal } from '@destyler-ui/svelte'
  import { Dialog } from '@destyler-ui/svelte'

  const props: DialogRootProps = $props()
</script>

<Dialog.Root {...props}>
  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
  <div use:portal>
    <Dialog.Backdrop />
    <Dialog.Positioner data-testid="positioner">
      <Dialog.Content>
        <Dialog.Title>Dialog Title</Dialog.Title>
        <Dialog.Description>Dialog Description</Dialog.Description>
        <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
      </Dialog.Content>
    </Dialog.Positioner>
  </div>
</Dialog.Root>

Controlled

Control the open state of the dialog programmatically.

<script setup lang="ts">
import { Dialog } from '@destyler-ui/vue'
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <button @click="() => (open = true)">Open Dialog</button>
  <Dialog.Root v-model:open="open">
    <Teleport to="body">
      <Dialog.Backdrop />
      <Dialog.Positioner>
        <Dialog.Content>
          <Dialog.Title>Dialog Title</Dialog.Title>
          <Dialog.Description>Dialog Description</Dialog.Description>
          <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
        </Dialog.Content>
      </Dialog.Positioner>
    </Teleport>
  </Dialog.Root>
</template>

import { useState } from 'react'
import { createPortal } from 'react-dom'
import { Dialog } from '@destyler-ui/react'

export function Controlled() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Dialog</button>
      <Dialog.Root open={open} onOpenChange={({ open }) => setOpen(open)}>
        {createPortal(
          <>
            <Dialog.Backdrop />
            <Dialog.Positioner>
              <Dialog.Content>
                <Dialog.Title>Dialog Title</Dialog.Title>
                <Dialog.Description>Dialog Description</Dialog.Description>
                <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
              </Dialog.Content>
            </Dialog.Positioner>
          </>,
          document.body,
        )}
      </Dialog.Root>
    </>
  )
}

import { Dialog } from '@destyler-ui/solid/dialog'
import { createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'

export function Controlled() {
  const [isOpen, setIsOpen] = createSignal(false)

  return (
    <>
      <button type="button" onClick={() => setIsOpen(true)}>
        Open Dialog
      </button>
      <Dialog.Root open={isOpen()} onOpenChange={() => setIsOpen(false)}>
        <Portal>
          <Dialog.Backdrop />
          <Dialog.Positioner>
            <Dialog.Content>
              <Dialog.Title>Dialog Title</Dialog.Title>
              <Dialog.Description>Dialog Description</Dialog.Description>
              <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
            </Dialog.Content>
          </Dialog.Positioner>
        </Portal>
      </Dialog.Root>
    </>
  )
}

<script lang="ts">
  import { portal } from '@destyler-ui/svelte'
  import { Dialog } from '@destyler-ui/svelte'

  let open = $state(false)
</script>

<button onclick={() => open = true}>Open Dialog</button>
<Dialog.Root bind:open>
  <div use:portal>
    <Dialog.Backdrop />
    <Dialog.Positioner>
      <Dialog.Content>
        <Dialog.Title>Dialog Title</Dialog.Title>
        <Dialog.Description>Dialog Description</Dialog.Description>
        <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
      </Dialog.Content>
    </Dialog.Positioner>
  </div>
</Dialog.Root>

Initial Open

Open the dialog by default with defaultOpen.

<script setup lang="ts">
import { Dialog } from '@destyler-ui/vue'
</script>

<template>
 <Dialog.Root defaultOpen>
    <Dialog.Trigger>Open Dialog</Dialog.Trigger>
    <Teleport to="body">
      <Dialog.Backdrop />
      <Dialog.Positioner data-testid="positioner">
        <Dialog.Content>
          <Dialog.Title>Dialog Title</Dialog.Title>
          <Dialog.Description>Dialog Description</Dialog.Description>
          <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
        </Dialog.Content>
      </Dialog.Positioner>
    </Teleport>
  </Dialog.Root>
</template>

import { createPortal } from 'react-dom'
import { Dialog } from '@destyler-ui/react'

export function InitialOpen(props: Dialog.RootProps) {
  return (
    <Dialog.Root {...props} defaultOpen>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      {createPortal(
        <>
          <Dialog.Backdrop />
          <Dialog.Positioner data-testid="positioner">
            <Dialog.Content>
              <Dialog.Title>Dialog Title</Dialog.Title>
              <Dialog.Description>Dialog Description</Dialog.Description>
              <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
            </Dialog.Content>
          </Dialog.Positioner>
        </>,
        document.body,
      )}
    </Dialog.Root>
  )
}

import { Dialog } from '@destyler-ui/solid/dialog'
import { Portal } from 'solid-js/web'

export function InitialOpen() {
  return (
    <Dialog.Root defaultOpen>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      <Portal>
        <Dialog.Backdrop />
        <Dialog.Positioner>
          <Dialog.Content>
            <Dialog.Title>Dialog Title</Dialog.Title>
            <Dialog.Description>Dialog Description</Dialog.Description>
            <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
    </Dialog.Root>
  )
}

<script lang="ts">
  import type { DialogRootProps } from '@destyler-ui/svelte'
  import { portal } from '@destyler-ui/svelte'
  import { Dialog } from '@destyler-ui/svelte'

  const props: DialogRootProps = $props()
</script>

<Dialog.Root {...props} defaultOpen>
  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
  <div use:portal>
    <Dialog.Backdrop />
    <Dialog.Positioner data-testid="positioner">
      <Dialog.Content>
        <Dialog.Title>Dialog Title</Dialog.Title>
        <Dialog.Description>Dialog Description</Dialog.Description>
        <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
      </Dialog.Content>
    </Dialog.Positioner>
  </div>
</Dialog.Root>

Lazy Mount

Mount the dialog content lazily when first opened.

<script setup lang="ts">
import { Dialog } from '@destyler-ui/vue'
</script>

<template>
  <Dialog.Root lazyMount unmountOnExit>
    <Dialog.Trigger>Open Dialog</Dialog.Trigger>
    <Dialog.Backdrop />
    <Dialog.Positioner>
      <Dialog.Content>
        <Dialog.Title>Dialog Title</Dialog.Title>
        <Dialog.Description>Dialog Description</Dialog.Description>
        <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
      </Dialog.Content>
    </Dialog.Positioner>
  </Dialog.Root>
</template>

import { Dialog } from '@destyler-ui/react'

export function LazyMount() {
  return (
    <Dialog.Root lazyMount unmountOnExit>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      <Dialog.Backdrop />
      <Dialog.Positioner>
        <Dialog.Content>
          <Dialog.Title>Dialog Title</Dialog.Title>
          <Dialog.Description>Dialog Description</Dialog.Description>
          <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
        </Dialog.Content>
      </Dialog.Positioner>
    </Dialog.Root>
  )
}

import { Dialog } from '@destyler-ui/solid/dialog'

export function LazyMount() {
  return (
    <Dialog.Root lazyMount unmountOnExit>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      <Dialog.Backdrop />
      <Dialog.Positioner>
        <Dialog.Content>
          <Dialog.Title>Dialog Title</Dialog.Title>
          <Dialog.Description>Dialog Description</Dialog.Description>
          <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
        </Dialog.Content>
      </Dialog.Positioner>
    </Dialog.Root>
  )
}

<script lang="ts">
  import { Dialog } from '@destyler-ui/svelte'
</script>

<Dialog.Root lazyMount unmountOnExit>
  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
  <Dialog.Backdrop />
  <Dialog.Positioner>
    <Dialog.Content>
      <Dialog.Title>Dialog Title</Dialog.Title>
      <Dialog.Description>Dialog Description</Dialog.Description>
      <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
    </Dialog.Content>
  </Dialog.Positioner>
</Dialog.Root>

Render Function

Use render function for custom dialog rendering.

<script setup lang="ts">
import { Dialog } from '@destyler-ui/vue'
</script>

<template>
  <Dialog.Root>
    <Dialog.Trigger>Open Dialog</Dialog.Trigger>
    <Teleport to="body">
      <Dialog.Backdrop />
      <Dialog.Positioner>
        <Dialog.Content>
          <Dialog.Title>Dialog Title</Dialog.Title>
          <Dialog.Description>Dialog Description</Dialog.Description>
          <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
        </Dialog.Content>
      </Dialog.Positioner>
    </Teleport>
    <Dialog.Context v-slot="dialog">
      <p>Dialog is {{ dialog.open ? 'open' : 'closed' }}</p>
    </Dialog.Context>
  </Dialog.Root>
</template>

import { createPortal } from 'react-dom'
import { Dialog } from '@destyler-ui/react'

export function RenderFn() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      {createPortal(
        <>
          <Dialog.Backdrop />
          <Dialog.Positioner>
            <Dialog.Content>
              <Dialog.Title>Dialog Title</Dialog.Title>
              <Dialog.Description>Dialog Description</Dialog.Description>
              <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
            </Dialog.Content>
          </Dialog.Positioner>
        </>,
        document.body,
      )}
      <Dialog.Context>
        {dialog => <p>Dialog is {dialog.open ? 'open' : 'closed'}</p>}
      </Dialog.Context>
    </Dialog.Root>
  )
}

import { Dialog } from '@destyler-ui/solid/dialog'
import { Portal } from 'solid-js/web'

export function RenderFn() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      <Portal>
        <Dialog.Backdrop />
        <Dialog.Positioner>
          <Dialog.Content>
            <Dialog.Title>Dialog Title</Dialog.Title>
            <Dialog.Description>Dialog Description</Dialog.Description>
            <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
      <Dialog.Context>
        {context => <p>Dialog is {context().open ? 'open' : 'closed'}</p>}
      </Dialog.Context>
    </Dialog.Root>
  )
}

<script lang="ts">
  import { portal } from '@destyler-ui/svelte'
  import { Dialog } from '@destyler-ui/svelte'
</script>

<Dialog.Root>
  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
  <div use:portal>
    <Dialog.Backdrop />
    <Dialog.Positioner>
      <Dialog.Content>
        <Dialog.Title>Dialog Title</Dialog.Title>
        <Dialog.Description>Dialog Description</Dialog.Description>
        <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
      </Dialog.Content>
    </Dialog.Positioner>
  </div>
  <Dialog.Context>
    {#snippet children(dialog)}
      <p>Dialog is {dialog().open ? 'open' : 'closed'}</p>
    {/snippet}
  </Dialog.Context>
</Dialog.Root>

Root Provider

<script setup lang="ts">
import { Dialog, useDialog } from '@destyler-ui/vue'

const dialog = useDialog()
</script>

<template>
  <button @click="dialog.setOpen(true)">Open</button>

  <Dialog.RootProvider :value="dialog">
    <Dialog.Trigger>Open Dialog</Dialog.Trigger>
    <Teleport to="body">
      <Dialog.Backdrop />
      <Dialog.Positioner>
        <Dialog.Content>
          <Dialog.Title>Dialog Title</Dialog.Title>
          <Dialog.Description>Dialog Description</Dialog.Description>
          <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
        </Dialog.Content>
      </Dialog.Positioner>
    </Teleport>
  </Dialog.RootProvider>
</template>

import { createPortal } from 'react-dom'
import { Dialog, useDialog } from '@destyler-ui/react'

export function RootProvider() {
  const dialog = useDialog()

  return (
    <>
      <button onClick={() => dialog.setOpen(true)}>Open</button>

      <Dialog.RootProvider value={dialog}>
        <Dialog.Trigger>Open Dialog</Dialog.Trigger>
        {createPortal(
          <>
            <Dialog.Backdrop />
            <Dialog.Positioner>
              <Dialog.Content>
                <Dialog.Title>Dialog Title</Dialog.Title>
                <Dialog.Description>Dialog Description</Dialog.Description>
                <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
              </Dialog.Content>
            </Dialog.Positioner>
          </>,
          document.body,
        )}
      </Dialog.RootProvider>
    </>
  )
}

import { Dialog, useDialog } from '@destyler-ui/solid/dialog'
import { Portal } from 'solid-js/web'

export function RootProvider() {
  const dialog = useDialog()

  return (
    <>
      <button onClick={() => dialog().setOpen(true)}>Open</button>

      <Dialog.RootProvider value={dialog}>
        <Dialog.Trigger>Open Dialog</Dialog.Trigger>
        <Portal>
          <Dialog.Backdrop />
          <Dialog.Positioner>
            <Dialog.Content>
              <Dialog.Title>Dialog Title</Dialog.Title>
              <Dialog.Description>Dialog Description</Dialog.Description>
              <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
            </Dialog.Content>
          </Dialog.Positioner>
        </Portal>
      </Dialog.RootProvider>
    </>
  )
}

<script lang="ts">
  import { portal } from '@destyler-ui/svelte'
  import { Dialog, useDialog } from '@destyler-ui/svelte'

  const id = $props.id()
  const dialog = useDialog({ id })
</script>

<button onclick={() => dialog().setOpen(true)}>Open</button>
<Dialog.RootProvider value={dialog}>
  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
  <div use:portal>
    <Dialog.Backdrop />
    <Dialog.Positioner>
      <Dialog.Content>
        <Dialog.Title>Dialog Title</Dialog.Title>
        <Dialog.Description>Dialog Description</Dialog.Description>
        <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
      </Dialog.Content>
    </Dialog.Positioner>
  </div>
</Dialog.RootProvider>

API Reference

Root

Prop	Default	Type
`aria-label`	—	`string` Human readable label for the dialog, in event the dialog title is not rendered
`closeOnEscape`	`true`	`false \| true` Whether to close the dialog when the escape key is pressed
`closeOnInteractOutside`	`true`	`false \| true` Whether to close the dialog when the outside is clicked
`defaultOpen`	—	`false \| true` The initial open state of the dialog when it is first rendered. Use when you do not need to control its open state.
`finalFocusEl`	—	`() => HTMLElement` Element to receive focus when the dialog is closed
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ trigger: string; positioner: string; backdrop: string; content: string; closeTrigger: string; title: string; description: string; }>` The ids of the elements in the dialog. Useful for composition.
`initialFocusEl`	—	`() => HTMLElement` Element to receive focus when the dialog is opened
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`modal`	`true`	`false \| true` Whether to prevent pointer interaction outside the element and hide all content below it
`open`	—	`false \| true` Whether the dialog is open
`persistentElements`	—	`(() => Element)[]` Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event
`preventScroll`	`true`	`false \| true` Whether to prevent scrolling behind the dialog when it's opened
`restoreFocus`	—	`false \| true` Whether to restore focus to the element that had focus before the dialog was opened
`role`	`"dialog"`	`"dialog" \| "alertdialog"` The dialog's role
`trapFocus`	`true`	`false \| true` Whether to trap focus inside the dialog when it's opened
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Emit	Event
`escapeKeyDown`	`[event: KeyboardEvent]` Function called when the escape key is pressed
`focusOutside`	`[event: FocusOutsideEvent]` Function called when the focus is moved outside the component
`interactOutside`	`[event: InteractOutsideEvent]` Function called when an interaction happens outside the component
`openChange`	`[details: OpenChangeDetails]` Callback to be invoked when the dialog is opened or closed
`pointerDownOutside`	`[event: PointerDownOutsideEvent]` Function called when the pointer is pressed down outside the component
`update:open`	`[open: boolean]`

Backdrop

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

CloseTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Content

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

Description

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Title

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`aria-label`	—	`string` Human readable label for the dialog, in event the dialog title is not rendered
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`closeOnEscape`	`true`	`false \| true` Whether to close the dialog when the escape key is pressed
`closeOnInteractOutside`	`true`	`false \| true` Whether to close the dialog when the outside is clicked
`defaultOpen`	—	`false \| true` The initial open state of the dialog when it is first rendered. Use when you do not need to control its open state.
`finalFocusEl`	—	`() => HTMLElement \| null` Element to receive focus when the dialog is closed
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ trigger: string; positioner: string; backdrop: string; content: string; closeTrigger: string; title: string; description: string; }>` The ids of the elements in the dialog. Useful for composition.
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`initialFocusEl`	—	`() => HTMLElement \| null` Element to receive focus when the dialog is opened
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`modal`	`true`	`false \| true` Whether to prevent pointer interaction outside the element and hide all content below it
`onEscapeKeyDown`	—	`(event: KeyboardEvent) => void` Function called when the escape key is pressed
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`onFocusOutside`	—	`(event: calendar.FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onInteractOutside`	—	`(event: calendar.InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`	—	`(details: dialog.OpenChangeDetails) => void` Callback to be invoked when the dialog is opened or closed
`onPointerDownOutside`	—	`(event: calendar.PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`open`	—	`false \| true` Whether the dialog is open
`persistentElements`	—	`(() => Element \| null)[]` Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`preventScroll`	`true`	`false \| true` Whether to prevent scrolling behind the dialog when it's opened
`restoreFocus`	—	`false \| true` Whether to restore focus to the element that had focus before the dialog was opened
`role`	`"dialog"`	`"dialog" \| "alertdialog"` The dialog's role
`trapFocus`	`true`	`false \| true` Whether to trap focus inside the dialog when it's opened
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Backdrop

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

CloseTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Content

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseDialogContext) => ReactNode`

Description

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseDialogReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Title

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`aria-label`	—	`string` Human readable label for the dialog, in event the dialog title is not rendered
`children`	—	`null \| number \| false \| true \| Node \| JSX.ArrayElement \| (string & {})`
`closeOnEscape`	`true`	`false \| true` Whether to close the dialog when the escape key is pressed
`closeOnInteractOutside`	`true`	`false \| true` Whether to close the dialog when the outside is clicked
`defaultOpen`	—	`false \| true` The initial open state of the dialog when it is first rendered. Use when you do not need to control its open state.
`finalFocusEl`	—	`() => HTMLElement \| null` Element to receive focus when the dialog is closed
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ trigger: string; positioner: string; backdrop: string; content: string; closeTrigger: string; title: string; description: string; }>` The ids of the elements in the dialog. Useful for composition.
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`initialFocusEl`	—	`() => HTMLElement \| null` Element to receive focus when the dialog is opened
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`modal`	`true`	`false \| true` Whether to prevent pointer interaction outside the element and hide all content below it
`onEscapeKeyDown`	—	`(event: KeyboardEvent) => void` Function called when the escape key is pressed
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`onFocusOutside`	—	`(event: dialog.FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onInteractOutside`	—	`(event: dialog.InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`	—	`(details: OpenChangeDetails) => void` Callback to be invoked when the dialog is opened or closed
`onPointerDownOutside`	—	`(event: dialog.PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`open`	—	`false \| true` Whether the dialog is open
`persistentElements`	—	`(() => Element \| null)[]` Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`preventScroll`	`true`	`false \| true` Whether to prevent scrolling behind the dialog when it's opened
`restoreFocus`	—	`false \| true` Whether to restore focus to the element that had focus before the dialog was opened
`role`	`"dialog"`	`"dialog" \| "alertdialog"` The dialog's role
`trapFocus`	`true`	`false \| true` Whether to trap focus inside the dialog when it's opened
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Backdrop

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

CloseTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Content

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseDialogContext) => Element`

Description

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseDialogReturn`
`children`	—	`null \| number \| false \| true \| Node \| JSX.ArrayElement \| (string & {})`
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Title

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLHeadingElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`aria-label`	—	`string` Human readable label for the dialog, in event the dialog title is not rendered
`children`	—	`Snippet<[]> \| undefined`
`closeOnEscape`	`true`	`false \| true` Whether to close the dialog when the escape key is pressed
`closeOnInteractOutside`	`true`	`false \| true` Whether to close the dialog when the outside is clicked
`defaultOpen`	—	`false \| true` The initial open state of the dialog when it is not controlled. Prefer this over seeding with `open` for uncontrolled usage.
`finalFocusEl`	—	`() => HTMLElement \| null` Element to receive focus when the dialog is closed
`id`	—	`string`
`ids`	—	`Partial<{ trigger: string; positioner: string; backdrop: string; content: string; closeTrigger: string; title: string; description: string; }>` The ids of the elements in the dialog. Useful for composition.
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`initialFocusEl`	—	`() => HTMLElement \| null` Element to receive focus when the dialog is opened
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`modal`	`true`	`false \| true` Whether to prevent pointer interaction outside the element and hide all content below it
`onEscapeKeyDown`	—	`(event: KeyboardEvent) => void` Function called when the escape key is pressed
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`onFocusOutside`	—	`(event: import("@destyler/calendar").FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onInteractOutside`	—	`(event: import("@destyler/calendar").InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`	—	`(details: import("@destyler/dialog").OpenChangeDetails) => void` Callback to be invoked when the dialog is opened or closed
`onPointerDownOutside`	—	`(event: import("@destyler/calendar").PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`open`	—	`false \| true` Whether the dialog is open
`persistentElements`	—	`(() => Element \| null)[]` Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`preventScroll`	`true`	`false \| true` Whether to prevent scrolling behind the dialog when it's opened
`restoreFocus`	—	`false \| true` Whether to restore focus to the element that had focus before the dialog was opened
`role`	`"dialog"`	`"dialog" \| "alertdialog"` The dialog's role
`skipAnimationOnMount`	`false`	`false \| true` Whether to allow the initial presence animation.
`trapFocus`	`true`	`false \| true` Whether to trap focus inside the dialog when it's opened
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Backdrop

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

CloseTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

Content

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Context

Prop	Default	Type
`children*`	—	`Snippet<[UseDialogContext]>`

Description

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"p">]>`
`children`	—	`Snippet<[]> \| undefined`

Positioner

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UseDialogReturn`
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`skipAnimationOnMount`	`false`	`false \| true` Whether to allow the initial presence animation.
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Title

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"h2">]>`
`children`	—	`Snippet<[]> \| undefined`

Trigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`