Modal
A dialog that sits over the page and holds focus until it is answered or closed. For a decision or a short task that has to finish before the person carries on.
Preview
When to use
- To confirm something that cannot be undone: delete, publish, leave with unsaved changes.
- For a short, self-contained task — rename, invite, a small form — that should not lose the page behind it.
- Rarely. Each modal interrupts; most messages can sit on the page instead.
Reach for something else
- For a message that needs no answer: that is an Alert or a toast.
- For a few options tied to a button, where the page should stay usable: that is a Popover.
Anatomy
- 1
Scrim
A translucent layer over the page that marks it as unavailable.
- 2
Dialog
White surface, 16px radius, hairline ring, capped width.
- 3
Header
A title that states the question, and an optional close button.
- 4
Body
One or two sentences, or a short form.
- 5
Footer
Cancel on the left of the pair, the primary action on the right.
States
Closed
Only the trigger is on the page.
Open
Scrim in, dialog in, focus on the first control.
Destructive
The primary action takes the error intent and names the thing: Delete project.
Closing
Escape, Cancel, the close button or a click on the scrim; focus returns to the trigger.
Accessibility
- The dialog has role="dialog" and aria-modal="true", named by its title with aria-labelledby and described by the body with aria-describedby.
- Focus moves into the dialog on open, Tab and Shift+Tab stay inside it, and the page behind is inert.
- Escape closes it, and focus goes back to the element that opened it.
- A destructive dialog puts initial focus on Cancel, not on the destructive action.
Source
The Modal is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block