Modal
A dialog/modal for displaying content that requires user attention or action. Supports different sizes, close behaviors, and accessibility features.
Basic Modal
Simple modal with title and content.
Confirmation Dialog
Modal with footer actions for confirm/cancel patterns.
Settings Panel
Larger modal with form controls for settings.
Sizes
Modals come in three sizes: small, medium (default), and large.
Close Behaviors
Control how the modal can be closed.
Accessibility
Modal accessibility features.
Keyboard
- Escape - Close modal (when closeOnEscape enabled)
- Tab - Navigate focusable elements (trapped in modal)
- Shift + Tab - Navigate backwards
Focus Management
- Focus is trapped within the modal while open
- Focus moves to modal when opened
- Focus returns to trigger element when closed
ARIA
- role="dialog" - Identifies as dialog
- aria-modal="true" - Indicates modal behavior
- aria-labelledby - Points to title
- aria-describedby - Points to content
Props
- closeOnBackdropClick - Close when clicking outside (default: true)
- closeOnEscape - Close on Escape key (default: true)
- showCloseButton - Show X button (default: true)