Modal Component

Accessible modal dialogs with backdrop overlay

Basic Modal

Default Modal

Features:

  • Header with title and close button
  • Scrollable body content
  • Footer with action buttons
  • Backdrop click to close
  • Escape key to close
  • Focus trap for accessibility

Sizes

Available sizes (max-width)

Confirmation Modal

Variants

Footer Alignment

Options

Accessibility

Built-in A11y Features:

  • role="dialog" and aria-modal="true"
  • aria-labelledby pointing to modal title
  • Focus moves to modal on open
  • Body scroll lock when modal is open
  • Escape key closes modal
  • Reduced motion support