DesignDojo
1.2-components · 20-modal

Estimated time: 6 min

Modal anatomy

When to Use

  • Destructive confirmation like deleting projects or teams.
  • Critical required input before continuing a workflow.
  • Contextual detail previews that should not navigate away.

When NOT to Use

Use modal dialogs for high-importance actions with clear primary and cancel paths.

For side-by-side editing or non-blocking info, use in-page panels instead.

Variants

Confirmation modal
Form modal
Fullscreen mobile

Confused?

Use Modal for blocking decisions, and use Alert when message context should stay in page flow.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Implement a modal dialog with focus trap, backdrop click close behavior, and clear primary and secondary actions for confirmation flows.

Pencil Prompt

Design a confirmation modal with title, body copy, and action buttons, ensuring the backdrop and elevation focus attention on the dialog.

Progress saves locally on this device.

Learning Loop

Lock this lesson in with a fast cycle: quiz the module, drill flashcards, then run the daily challenge.

Take Module QuizPractice FlashcardsRun Daily Challenge