Modal

Accessible overlay dialog built on native <dialog>.

A modal dialog built on the native `<dialog>` element, so the platform supplies the focus trap, Esc-to-close and an inert backdrop. Bind `open` to your state; the dialog opens/closes in lock-step. Optional `header`/`footer` snippets frame the body, `closeOnBackdrop`/`closeOnEsc` tune dismissal, and `danger` flags destructive dialogs. Sets `aria-labelledby` to the `title` automatically, or accepts an `aria-label` when untitled.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Modal, Button } from 'dssoca';
  let open = $state(false);
</script>

<Button onclick={() => (open = true)}>Open</Button>
<Modal bind:open title="Confirm action">
  {#snippet footer()}
    <Button variant="ghost" onclick={() => (open = false)}>Cancel</Button>
    <Button onclick={() => (open = false)}>Confirm</Button>
  {/snippet}
  <p>Are you sure you want to continue?</p>
</Modal>

Uses the native `<dialog>` element: the browser provides the focus trap, Esc handling and an inert `::backdrop`. `aria-labelledby` points at the title when set; otherwise pass `aria-label`. The close button carries `aria-label="Close"`. Size controls the dialog max-width only. Zero border-radius.

Props

Prop	Type	Default	Description
`open`	`boolean`	`false`	Bindable. Whether the modal is shown; syncs to the native dialog.
`title`	`string`	—	Header title; wires `aria-labelledby`. Omit and pass `aria-label` for an untitled dialog.
`closeOnBackdrop`	`boolean`	`true`	Clicking outside the panel (on the backdrop) closes the modal.
`closeOnEsc`	`boolean`	`true`	Esc closes the modal. When false the cancel event is prevented.
`danger`	`boolean`	`false`	Styling hint for destructive dialogs (tints the title).
`aria-label`	`string`	—	Accessible name used when no `title` is set.
`onclose`	`() => void`	—	Called after the dialog closes (Esc, backdrop, or button).
`header`	`Snippet`	—	Replaces the default title row in the header.
`footer`	`Snippet`	—	Footer content, typically a trailing cancel→confirm action pair (the affirmative `Button` trails the dismissive `ghost` one, per dialog convention).
`children`	`Snippet`	—	Required. The modal body content.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.