feedback

Modal

A dialog that appears over page content and requires user interaction.

Modals interrupt the workflow to demand focused attention. They are powerful and should be used sparingly — only when the action is significant enough to warrant interrupting the user's flow.

Anatomy

  • Backdrop
  • Panel
  • Header (title + close button)
  • Body
  • Footer (actions)

Variants

Confirmation dialogForm modalImage/media modalSide sheet (edge-anchored)Full-screen modal

States

Opening (animation)OpenLoading (spinner in body)Error (inline in body)Closing (animation)

Rules

✓ Do

  • •Focus trap inside modal
  • •Escape key closes
  • •Scroll lock on body
  • •One primary action

✗ Don't

  • ×Don't put a modal inside a modal
  • ×Don't use for simple notifications (use toast)
  • ×Don't make body scroll inside a modal without necessity

AI Prompt

Paste into Claude, Cursor, Bolt, or v0.

Modal: max-width 480px, 28px padding, 14px radius, elevated shadow, rgba(0,0,0,0.55) backdrop. Focus trap. Escape closes. body overflow: hidden while open. Entrance: fade + slide-up 200ms.