Modal
Dialog overlay for focused interactions and important information.
Basic Modal
Simple modal with content
Sizes
Different modal sizes
With Footer
Modal with action buttons in footer
Confirmation Dialog
Small modal for confirmations
| Prop | Type | Default | Description |
|---|---|---|---|
isOpen | boolean | required | Whether the modal is open |
onClose | () => void | required | Callback when modal should close |
title | React.ReactNode | undefined | Modal title |
size | 'small' | 'medium' | 'large' | 'fullscreen' | 'medium' | Size of the modal |
closeOnOverlayClick | boolean | true | Whether clicking overlay closes the modal |
closeOnEscape | boolean | true | Whether pressing Escape closes the modal |
showCloseButton | boolean | true | Whether to show close button |
footer | React.ReactNode | undefined | Footer content |
check_circleWhen to use
- Use for focused tasks that require user attention
- Use for confirmations before destructive actions
- Use for forms that should be completed before continuing
- Provide clear close mechanisms (button, overlay, escape)
cancelWhen not to use
- Don't use for non-essential information (use toasts instead)
- Don't stack multiple modals on top of each other
- Don't use for long forms (use a dedicated page instead)
- Don't prevent all close mechanisms for non-critical modals