Dialog Component

Variants

Dialog's variant is 'normal' (default) or 'danger' — it colours the confirm button.

Sizes

Basic Dialog

import { Dialog, Button } from 'svelte-ui';

let basicDialogOpen = $state(false);

<Button
  text="Open Basic Dialog"
  variant="primary"
  onclick={() => basicDialogOpen = true}
/>

<Dialog
  bind:isOpen={basicDialogOpen}
  title="Information"
  message="This is a basic dialog with a simple message."
  onConfirm={() => console.log('Confirmed!')}
  onCancel={() => console.log('Cancelled!')}
/>

Delete confirmation — must decide

dismissible={false} makes it "in your face": backdrop-click and Escape are disabled, so the user must pick Cancel or Delete. (Background scroll stays locked either way.)

import { Dialog, Button } from 'svelte-ui';
import Delete from '~icons/mdi/delete';

let dangerDialogOpen = $state(false);

<Button
  text="Delete Item"
  variant="danger"
  onclick={() => dangerDialogOpen = true}
>
  {#snippet icon()}<Delete />{/snippet}
</Button>

<Dialog
  bind:isOpen={dangerDialogOpen}
  title="Delete Item"
  message="Are you sure you want to delete this item? This action cannot be undone."
  variant="danger"
  confirmText="Delete"
  dismissible={false}
  onConfirm={() => console.log('Deleted!')}
  onCancel={() => console.log('Cancelled!')}
/>

Custom Content

import { Dialog, Button, Alert } from 'svelte-ui';

let customDialogOpen = $state(false);

<Button
  text="Open Custom Dialog"
  variant="secondary"
  onclick={() => customDialogOpen = true}
/>

<Dialog
  bind:isOpen={customDialogOpen}
  title="Custom Content"
  onConfirm={() => console.log('Confirmed!')}
  onCancel={() => console.log('Cancelled!')}
>
  <!-- Anything in the children slot renders as the dialog body -->
  <div class="space-y-3">
    <Alert variant="info" filled text="This dialog holds custom content instead of a simple message." />
    <p class="text-sm opacity-70">Pass any markup through the children slot — inputs, badges, alerts, tables, or complex layouts.</p>
  </div>
</Dialog>

Confirmation Dialog

import { Dialog, Button } from 'svelte-ui';

let confirmDialogOpen = $state(false);

<Button
  text="Save Changes"
  variant="primary"
  onclick={() => confirmDialogOpen = true}
/>

<Dialog
  bind:isOpen={confirmDialogOpen}
  title="Save Changes"
  message="Do you want to save your changes before continuing?"
  confirmText="Save"
  cancelText="Don't Save"
  onConfirm={() => console.log('Saved!')}
  onCancel={() => console.log('Discarded!')}
/>

Features

Key features

• Top layer: portaled to <body> — never clipped by an ancestor and never perturbs page layout
• Composed from Card: border, --ui-border-radius, padding + CardHeader/CardFooter separators come from our own components
• Dismissible (default true): backdrop-click + Escape close it; dismissible={false} for a must-decide dialog
• Scroll lock: background scroll is locked while open (scrollbar-width compensated — no sideways jump)
• Variants: normal + danger (colours the confirm button)
• Size axis: sm/md/lg (or a responsive map) scales padding + separators
• Custom content: the children slot renders any markup as the body
• Customisable buttons: confirmText / cancelText, or hide via showConfirm/showCancel
• Accessible: role="dialog" + aria-modal, Escape to dismiss