Modal

You might say

Click the button to show a dialog in the middle of the screen and dim the background.

Pause the page for one focused decision or taskA modal appears above the page when the user must review or complete a focused task before continuing. It needs a clear title, a safe way to close, sensible keyboard focus, and buttons that state the result. Long or complex work is usually better on its own page.

Delete this item?

CancelConfirm deletion

The above is a static representation, click the button to view the interaction effect

Quick checkChoose the best answer

Editing a billing address has several fields but should not leave the order page. When does a Modal fit?

Use a Modal for this short, focused edit with clear save and closePut every explanatory line in a Modal so it is always seenPut primary site navigation in a Modal

You can say this to an AI Agent

Put order-page address editing in a Modal. On open, move focus to its title or first field; provide Save and Close, then return focus to the trigger on close. Test saving once and closing with Esc once, confirming background actions cannot fire and focus returns correctly.

When to use it

Confirm a destructive action
Delete this project?
CancelDelete
Complete a short focused form
Rename projectWebsite redesign v2
CancelSave
Review important information before continuing
Cover preview
Close
Choose one item without losing the current page
Verify your identity first
Verify now

When NOT to use it

Open a modal for ordinary navigation
A very long form
Place a long multi-step workflow inside a small box
Confirm deletion?
CancelDelete
Confirm one more time?
Confirm
Stack one modal on top of another
Remove every safe way to close it
🎉 50% off for a limited time!
No, thanksBuy now

Anatomy

Delete this item?CancelConfirm deletion

Translucency covers the page and can usually be closed by clicking on it

Floats above the mask, making the rest of the page unclickable

Clearly state the decisions that need to be made

Explain consequences or host short forms to control content length

The main button explains the results clearly, and dangerous actions use text and visual reminders of risks.

Variants

Confirm

Confirm deletion?

CancelConfirm deletion

Dangerous operations require explicit confirmation from the user before continuing.

Form

Rename project

CancelSave

Complete short forms such as renaming and creating new ones on the spot

Preview

Cover preview

Zoom in to see pictures or details, then close when finished

Typical use cases

Delete confirmation

Create folder

Invite member

Choose a template