Dialog

Modal dialog for important user interactions. Captures focus and requires user action.

Installation

Import

import { Dialog } from '@svelte-atoms/core';

Preset Configuration

Customize the dialog appearance using presets

You can customize the default styles for Dialog components by defining presets in your configuration:

Examples

Explore different dialog variations

Basic Dialog

Simple modal dialog

Code

<script lang="ts">
  import { Dialog, Button } from '@svelte-atoms/core';

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

<Dialog.Root bind:open={open}>
  {#snippet trigger({dialog})}
    <Button {...dialog.trigger()}>Open Dialog</Button>
  {/snippet}

  <Dialog.Content>
    <Dialog.Header class="mb-4">
      <h2 class="text-foreground text-xl font-semibold">Dialog Title</h2>
    </Dialog.Header>
    <Dialog.Body>
      <p>
        This is a modal dialog. It captures focus and requires user interaction before
        returning to the main content.
      </p>
    </Dialog.Body>
    <Dialog.Footer class="flex justify-end gap-2">
      <Button variant="secondary" onclick={() => (open = false)}>
        Cancel
      </Button>
      <Button
        variant="primary"
        onclick={() => (open = false)}
      >
        Confirm
      </Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

Alert Dialog

Dialog for critical actions

Code

<script lang="ts">
  import { Dialog, Button } from '@svelte-atoms/core';

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

<Dialog.Root bind:open={open}>
  {#snippet trigger({dialog})}
    <Button variant="destructive" {...dialog.trigger()}>Delete Item</Button>
  {/snippet}

  <Dialog.Content class="bg-background max-w-md rounded-lg p-6 shadow-lg">
    <Dialog.Header class="mb-4">
      <h2 class="text-foreground text-xl font-semibold">Are you sure?</h2>
    </Dialog.Header>
    <Dialog.Body class="text-muted-foreground mb-6">
      <p>This action cannot be undone. This will permanently delete the item.</p>
    </Dialog.Body>
    <Dialog.Footer class="flex justify-end gap-2">
      <Button variant="secondary" onclick={() => (open = false)}>
        Cancel
      </Button>
      <Button
        variant="destructive"
        onclick={() => (open = false)}
      >
        Confirm Delete
      </Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

API Reference

Dialog.Root Props

Prop

Type

Default

Description

open

boolean | undefined

false

Open

disabled

boolean | undefined

false

Disabled

portal

string | PortalBond | undefined

Portal

factory

((props: DialogBondProps) => DialogBond<DialogBondState<DialogBondProps>>) | undefined

undefined

Factory

children

Snippet<[{ dialog: DialogBond<DialogBondState<DialogBondProps>>; }]> | undefined

undefined

Children

Accessibility

Built-in Accessibility Features

• Focus trapped within dialog
• Escape key to close
• Proper ARIA attributes (role="dialog", aria-modal)
• Returns focus to trigger on close
• Screen reader announcements
• Keyboard navigation support

DataGrid

Divider