Modal
Dialog overlay for focused user interactions.
OverlaysTailwind CSS
Overview
Modals focus user attention on a single task or piece of information, blocking interaction with the rest of the page.
When to use
- For critical confirmations
- For forms that need focus
- For important notices that require acknowledgment
Preview
Modal Title
Modal content goes here. You can put any content inside.
Usage
html
<!-- Tailwind CSS pattern - copy the HTML/classes below -->Class Variations
No class variations documented for this pattern.
Guidelines
Do
- • Use clear action buttons
- • Provide a way to close the modal
- • Keep content focused and minimal
Don't
- • Don't nest modals within modals
- • Don't use for minor interactions
- • Don't make modals too large
Accessibility
- • Trap focus within the modal
- • Close on Escape key press
- • Return focus to trigger on close
Examples
Default
Modal Title
Modal content goes here. You can put any content inside.
Confirmation
Delete item?
This action cannot be undone. This will permanently delete the item.