Modal

organisms

Dialog overlay with backdrop. Sizes: sm (400px), md (560px), lg (720px), xl (960px). Focus trap, Escape to close, scroll lock, ARIA dialog pattern.

ARIA Role: dialog

Demo

Confirm Action

Are you sure you want to proceed? This action cannot be undone.

Props

PropTypeRequiredDefaultDescription
openbooleanYes—
onClose() => voidYes—
titlestringYes—

TypeScript Interface

interface ModalProps {
  open: boolean;
  onClose: () => void;
  title: string;
  description?: string;
  size?: 'sm' | 'md' | 'lg' | 'xl';
  children: React.ReactNode;
  footer?: React.ReactNode;
  initialFocusRef?: React.RefObject<HTMLElement>;
}

Assertions (NASA Rule 5)

  • [type]open and onClose required (controlled component)(NASA Rule 5)
  • [aria]role='dialog' aria-modal='true' aria-labelledby=titleId; focus trap; restore focus on close(WCAG 2.4.3, 4.1.2)

Usage

Import

import { Modal } from '@epasslive/design-system'

Basic

<Modal />

With Variants

<Modal variant="primary" size="md" />