Modal
A dialog that appears over the page content, requiring user interaction before returning to the main UI.
Plain English
A modal pauses the workflow and demands attention. It is appropriate for actions that require user confirmation (delete), forms that would disrupt the page flow (quick add), or focused tasks that need a clean environment (image cropping). The problem: modals are overused. Every decision point that triggers a modal adds friction. If users are dismissing a modal without reading it, the content should live on the page instead.
Technical
Modal structure: backdrop (position: fixed, inset: 0, rgba overlay, z-index: 300) + panel (position: fixed or absolute, centred, max-width: 440-560px, border-radius, elevated shadow). Accessibility: role="dialog", aria-modal="true", aria-labelledby pointing to the modal title, focus trap (Tab cycles through modal elements only), initial focus moves to the first interactive element, Escape closes. Scroll lock on body (overflow: hidden) while modal is open. Animation: fade + slide up (200ms ease-out).
Live Demo
Modals interrupt focus. Use only for critical actions needing confirmation.
Usage
✓ Good usage
A 480px modal for "Delete account?" with a warning icon, a clear explanation of consequences, a red "Delete" button, and a "Cancel" button — focused, proportionate, with Escape to dismiss.
✗ Bad usage
A modal containing a 10-field form that could live on its own page — complex content that takes 2+ minutes should not be in a modal.
Recommended values
- Panel width: 440-560px (default), up to 720px (wide)
- Panel padding: 24-32px
- Border radius: 12-16px
- Backdrop: rgba(0,0,0,0.55)
- Close: top-right × button, Escape key, backdrop click (for non-critical)
- Maximum: no modals inside modals
Common mistakes
- No focus trap — keyboard users Tab out of the modal to the background page.
- Modal inside a modal — a clear sign of over-architected UI.
- Body scroll not locked — content scrolls behind the modal, disorienting.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Modal: 480px max-width, 28px padding, 14px radius, elevated shadow, rgba(0,0,0,0.55) backdrop. Focus trap: Tab cycles within modal only. Escape closes. Body overflow: hidden while open. Entrance: opacity 0→1 + translateY(8px→0) in 200ms. role="dialog" aria-modal="true".