Dialog

A modal dialog that overlays the page content to display important information or require user interaction.

Anatomy 

<script>
  import {
    Dialog,
    DialogTrigger,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogBody,
    DialogFooter,
    DialogCloseButton,
    DialogActionTrigger,
  } from "@saas-ui/svelte/components/dialog";
</script>

<Dialog.Root>
  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Dialog Title</Dialog.Title>
      <Dialog.CloseButton />
    </Dialog.Header>
    <Dialog.Body>
      Dialog content goes here...
    </Dialog.Body>
    <Dialog.Footer>
      <Dialog.ActionTrigger>Cancel</Dialog.ActionTrigger>
      <Button>Confirm</Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

Examples

Alert Dialog Accessibility

Set role="alertdialog" to change the dialog to an alert dialog.

Basic Accessibility

Basic dialog with title, body content, and action buttons.

Cover Accessibility

Use size="cover" to make the dialog cover the entire screen while revealing a small portion of the page behind.

Initial Focus Accessibility

Use the initialFocusEl prop to set which element receives focus when the dialog opens. This is useful for directing user attention to a specific input field.

Inside Scroll Accessibility

Use the scrollBehavior="inside" prop to change the scroll behavior of the dialog when its content overflows.

Motion Preset Accessibility

Use the motionPreset prop to change the animation of the dialog.

Outside Scroll Accessibility

Use the scrollBehavior="outside" prop to change the scroll behavior of the dialog when its content overflows.

Sizes Accessibility

Use the size prop to change the size of the dialog. Options include xs, sm, md, lg, xl, cover, and full.

With Data List Accessibility

Compose the Dialog component with the DataList component to display structured information.

Props

Dialog.Root

The root container component that manages dialog state and context.

Prop Type Default Description
children Snippet - The dialog content.
open boolean false Whether the dialog is open.
onOpenChange (details: { open: boolean }) => void - Handler called when the open state changes.
size "xs" | "sm" | "md" | "lg" | "xl" | "cover" | "full" "md" The size of the dialog.
placement "center" | "top" | "bottom" "center" The placement of the dialog.
scrollBehavior "inside" | "outside" "outside" The scroll behavior of the dialog.
motionPreset "scale" | "slide-in-bottom" | "none" "scale" The motion preset of the dialog.
role "dialog" | "alertdialog" "dialog" The role of the dialog.
initialFocusEl () => HTMLElement | null - Element to receive focus when the dialog is opened.
finalFocusEl () => HTMLElement | null - Element to receive focus when the dialog is closed.
restoreFocus boolean true Whether to restore focus to the element that had focus before the dialog was opened.
lazyMount boolean - Whether to lazily mount the dialog content.
unmountOnExit boolean - Whether to unmount the dialog on exit.
onPrefetch () => void - Callback invoked when hovering over the trigger (for prefetching content). Similar to Astro's link prefetching, this allows preloading data before opening.

Dialog.Trigger

A button that opens the dialog when clicked.

Prop Type Default Description
children Snippet - Content to render inside the trigger button.
class string - Additional CSS classes to apply.
asChild boolean false Whether to render as a child element instead of a button.
variant "solid" | "outline" | "ghost" | "subtle" | "surface" | "plain" "outline" The visual variant of the trigger button.
size "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" "md" The size of the trigger button.
colour ColourName "gray" The colour of the trigger button.
style string - Inline styles to apply.

Dialog.Content

The container for the dialog content, rendered in a portal.

Prop Type Default Description
children Snippet - Content to render inside the dialog.
class string - Additional CSS classes to apply.

Dialog.Header

The header section of the dialog, typically containing the title and close button.

Prop Type Default Description
children Snippet - Content to render inside the header.
class string - Additional CSS classes to apply.

Dialog.Title

The title text of the dialog.

Prop Type Default Description
children Snippet - The title text content.
class string - Additional CSS classes to apply.

Dialog.Body

The main content area of the dialog.

Prop Type Default Description
children Snippet - Content to render inside the body.
class string - Additional CSS classes to apply.

Dialog.Footer

The footer section of the dialog, typically containing action buttons.

Prop Type Default Description
children Snippet - Content to render inside the footer.
class string - Additional CSS classes to apply.

Dialog.CloseButton

A close button (X icon) positioned in the top-right corner of the dialog.

Prop Type Default Description
class string - Additional CSS classes to apply.

Dialog.ActionTrigger

A button that closes the dialog when clicked, typically used for cancel or secondary actions.

Prop Type Default Description
children Snippet - Content to render inside the button.
class string - Additional CSS classes to apply.
asChild boolean false Whether to render as a child element instead of a button.
variant "solid" | "outline" | "ghost" | "subtle" | "surface" | "plain" "surface" The visual variant of the button.
size "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" "md" The size of the button.
colour ColourName "gray" The colour of the button.
style string - Inline styles to apply.