Modal
Display focused dialogs for flows that require immediate attention.
Example
API reference
ModalProps
isOpenboolean—
Name: isOpen
Description: Controls whether the dialog is visible.
Type: boolean
Default: —
onClose() => void—
Name: onClose
Description: Called when modal should close.
Type: () => void
Default: —
titlestring—
Name: title
Description: Dialog heading, used for accessible naming.
Type: string
Default: —
closeOnBackdropClickbooleantrue
Name: closeOnBackdropClick
Description: Allows click on backdrop to dismiss modal.
Type: boolean
Default: true
closeOnEscapebooleantrue
Name: closeOnEscape
Description: Allows Escape key to dismiss modal.
Type: boolean
Default: true
size'sm' | 'md' | 'lg' | 'full''md'
Name: size
Description: Sets modal width behavior.
Type: 'sm' | 'md' | 'lg' | 'full'
Default: 'md'
returnFocusToHTMLElement | null—
Name: returnFocusTo
Description: Optional element to receive focus when modal closes.
Type: HTMLElement | null
Default: —
Accessibility
- WCAG 2.1.1 Keyboard: ESC key support, focus trap
- WCAG 2.1.2 No Keyboard Trap: Focus returns to trigger
- WCAG 2.4.3 Focus Order: Focus trapped within modal
- WCAG 4.1.2 Name, Role, Value: ARIA modal pattern