Dialogs

Modal

A world-class modal dialog component designed for healthcare applications. Features proper focus management, keyboard navigation, and full WCAG 2.1 accessibility compliance.

Basic Modal

Standard modal for displaying patient information or simple forms.

Form Modal

Modal containing a form for scheduling appointments. Uses larger size for complex forms.

Critical Modal (Prevent Close)

For critical workflows that require explicit action. Cannot be dismissed by clicking outside or pressing Escape.

Modal Sizes

Choose the appropriate size based on content complexity. Sizes range from compact (sm) to full-width (full).

Position Variants

Center position is default. Use top position for modals that may trigger additional dialogs.

Scrollable Content

Long content scrolls inside the modal body while header and footer remain fixed.

Props

Prop	Type	Default	Description
`open` *	`boolean`	—	Controls modal visibility
`id`	`string`	—	Custom ID (auto-generated if not provided)
`title`	`string`	'Dialog'	Modal header title
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'`	'md'	Modal width
`position`	`'center' \| 'top'`	'center'	Vertical position
`scrollBehavior`	`'inside' \| 'outside'`	'inside'	Scroll behavior for long content
`closeOnBackdrop`	`boolean`	true	Close when clicking backdrop
`closeOnEscape`	`boolean`	true	Close on Escape key
`showCloseButton`	`boolean`	true	Show close button in header
`preventClose`	`boolean`	false	Prevent closing (for critical modals)
`initialFocus`	`HTMLElement \| null`	—	Element to focus when modal opens
`enableFocusTrap`	`boolean`	true	Enable focus trap to keep focus within modal when open
`header`	`Snippet`	—	Custom header content (overrides title)
`footer`	`Snippet`	—	Footer slot for actions
`children`	`Snippet`	—	Main content
`onclose` *	`() => void`	—	Called when modal requests close
`testId`	`string`	—	Test ID for e2e testing

Healthcare Best Practices

• Use modals sparingly - they interrupt workflow and can cause user fatigue
• For destructive actions (deleting records, cancelling appointments), use ConfirmDialog instead
• Prevent accidental close for forms: use closeOnBackdrop={false}
• Critical workflows: use preventClose={true} for drug interactions, safety alerts
• Focus management is automatic - first focusable element receives focus on open
• Focus trap keeps keyboard focus within the modal; disable with enableFocusTrap={false} if the modal contains elements that need external focus (e.g., date pickers with portaled calendars)
• Escape key closes the modal by default (disable with closeOnEscape={false})
• Screen readers: title is announced via aria-labelledby, content via aria-describedby
• Focus restoration: when modal closes, focus returns to the element that opened it