Dialog

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

Installation

Import

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

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">
  let open = $state(false);
</script>

<button onclick={() => open = true}>Open Dialog</button>

<Dialog.Root bind:open>
  <Dialog.Content>
    <Dialog.Header>
      <h2>Dialog Title</h2>
    </Dialog.Header>
    <Dialog.Body>
      <p>Dialog content goes here.</p>
    </Dialog.Body>
    <Dialog.Footer>
      <button onclick={() => open = false}>Close</button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

Alert Dialog

Dialog for critical actions

Code

<Dialog.Root bind:open variant="alert">
  <Dialog.Content>
    <Dialog.Header>
      <h2>Are you sure?</h2>
    </Dialog.Header>
    <Dialog.Body>
      <p>This action cannot be undone.</p>
    </Dialog.Body>
    <Dialog.Footer>
      <button>Cancel</button>
      <button>Confirm</button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

API Reference

Dialog.Root Props

Prop

Type

Default

Description

open

boolean

false

Control open state

modal

boolean

true

Modal behavior with backdrop

closeOnEscape

boolean

true

Close on Escape key

closeOnOutsideClick

boolean

true

Close on backdrop click

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