Modal Dialog Patterns

Accessible overlay windows for confirmations, forms, and focused workflows.

Basic Confirmation

This action cannot be undone. All data will be permanently removed.

Keys are scoped to your current project.

Key Name

Expiration

• Trap focus within the modal while open. Use a hidden sentinel element at each end.

• Close on Escape keydown. Close on backdrop click unless the modal contains unsaved state.

• Render into a portal container appended to document.body to avoid z-index stacking context issues.

• Apply aria-modal="true" and role="dialog" with a descriptive aria-label.

• Animate entrance with a brief scale+fade. Keep it under 200ms — snappy, not sluggish.