Modal
Modals display content in a layer above the page, requiring user interaction.
Basic
A simple modal with title, body content, and footer actions.
Sizes
Modals support sm, md, and lg sizes.
Confirm Dialog
A realistic destructive action confirmation dialog.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Whether the modal is visible. |
onClose | () => void | — | Callback when the modal is requested to close. |
title | string | — | Optional title displayed in the modal header. |
size | "sm" | "md" | "lg" | "md" | Controls the width of the modal. |
closeOnBackdrop | boolean | true | Whether clicking the backdrop closes the modal. |
footer | ReactNode | — | Content rendered in the modal footer area. |
children | ReactNode | — | The main content of the modal. |
Related Components
Best Practices
✅ Do
- Always provide a clear close mechanism
- Focus the first interactive element on open
- Keep modal content concise
- Use overlay to indicate background is inactive
❌ Don't
- Stack multiple modals
- Use modals for simple confirmations (use alerts)
- Put scrollable content in modals
- Open modals on page load without user action
Accessibility
| Feature | Support |
|---|---|
| Focus trap | Keeps focus within the modal while open |
| Escape to close | Pressing Escape dismisses the modal |
| aria-modal="true" | Indicates a modal dialog to assistive technologies |
| role="dialog" | Identifies the element as a dialog |
| Focus returns to trigger | Focus moves back to the trigger element on close |
| aria-labelledby | Links the modal to its title for screen readers |