Modal

overlays

Accessible modal dialog with overlay backdrop, escape key close, body scroll lock, slide-up animation, close button, and optional title. Uses role=dialog with aria-modal=true.

Import

typescript
import { Modal } from "packages/ui/src";

Props

ModalProps

PropTypeRequired
openbooleanYes
onClose() => void, title?: string, children: ReactNode, className?: stringYes

Examples

Basic Modal

Simple modal with just body content. Click overlay or press Escape to close.

Titled Modal

Modal with header title and close button.

Long Content Modal

Modal with scrollable content. Body scroll is locked while open.

Metadata

Component Metadata
Familyoverlays
FrameworksNext.js, Astro/EmDash
DescriptionAccessible modal dialog with overlay backdrop, escape key close, body scroll lock, slide-up animation, close button, and optional title. Uses role=dialog with aria-modal=true.
PropsModalProps (open: boolean, onClose: () => void, title?: string, children: ReactNode, className?: string)
Statesopen, closed, with-title, without-title
A11y
  • role=dialog with aria-modal=true
  • aria-label from title or fallback 'Dialog'
  • Close button with aria-label='Close dialog'
  • Escape key closes modal
Responsive
  • Max-width constrained with 1rem margin
  • Centers vertically and horizontally
Motion
  • Overlay fade-in animation
  • Content slide-up animation
Token Dependencies
  • components.modal.overlayBackground
  • components.modal.background
  • components.modal.borderRadius
  • components.modal.border
  • components.modal.shadow
  • components.modal.padding
  • components.modal.maxWidth
  • components.modal.titleColor
  • components.modal.titleFontSize
  • components.modal.bodyColor
  • components.modal.closeColor
  • components.modal.closeHoverColor
  • components.modal.zIndex
  • components.modal.animationDuration
Content Slotstitle (string), children (ReactNode)
CMS Bindings
  • Dialog title from CMS
  • Dialog body content from CMS
Test Cases
  • Renders when open
  • Does not render when closed
  • Shows title when provided
  • Renders children
  • Has aria-modal attribute
  • Calls onClose when close button clicked
  • Has close button with aria-label
  • Passes className through