Modal

Accessible dialog component using native <dialog> element. Supports multiple sizes, custom headers/footers, focus trap, and keyboard navigation.

Installation

import { Modal } from '@happyvertical/smrt-svelte';

Basic Usage

Simple modal with title and content.

<Button onclick={() => open = true}>Open Modal</Button>

<Modal bind:open title="Welcome">
  <p>This is the modal content.</p>
</Modal>

With Footer Actions

Add action buttons in the footer.

<Modal bind:open title="Edit Profile">
  <p>Update your profile information below.</p>

  {#snippet footer()}
    <Button variant="ghost" onclick={() => open = false}>Cancel</Button>
    <Button onclick={() => open = false}>Save Changes</Button>
  {/snippet}
</Modal>

Sizes

Available in small, medium, large, extra large, and full sizes.

<Modal bind:open title="Modal" size="sm">...</Modal>
<Modal bind:open title="Modal" size="md">...</Modal>
<Modal bind:open title="Modal" size="lg">...</Modal>
<Modal bind:open title="Modal" size="xl">...</Modal>

Props

TypeScript

import { Modal } from '@happyvertical/smrt-svelte';
import type { Snippet } from 'svelte';

interface Props {
  open?: boolean;
  onClose?: () => void;
  title?: string;
  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
  closeOnBackdrop?: boolean;
  closeOnEscape?: boolean;
  showClose?: boolean;
  header?: Snippet;
  footer?: Snippet;
  children?: Snippet;
  ariaLabel?: string;
  ariaDescribedBy?: string;
}

Accessibility

• Uses native <dialog> element for accessibility
• Automatic focus trap within the modal
• Escape key closes the modal (configurable)
• Backdrop click closes the modal (configurable)
• Supports aria-label and aria-describedby
• Returns focus to trigger element on close