Modal vs. Popover
A modal stops the page until the task is done. A popover stays beside its button and lets the page keep working.
Use a modal for one task that must finish first. Use a popover for extra details or a small action.
See what each pattern does
Try each example. Then read about the job it is made to do.
Modal Dialog
A modal dialog is a focused window. It blocks the current screen until someone closes or finishes it.
For account deletion, keyboard focus stays inside the dialog. If the person cancels, focus returns to the button that opened it.
- Use it when
- Use it for a short choice or small task that must get full attention.
- Do not use it when
- Never open one dialog on top of another or use one for normal, low-risk information.
- Name used in code
<dialog> / role="dialog" aria-modal="true"
Popover
A popover is a small panel attached to the control that opened it. It can hold structured content and actions without blocking the page.
popover attribute / PopoverSelect an avatar to open a small profile. It shows the person's role, contact details, and a Follow action.
- Use it when
- Use it when the content belongs beside its trigger and people can keep using the page.
- Do not use it when
- Never use it for a short label-only hint. Use a tooltip instead.
- Name used in code
popover attribute / Popover
Quick comparison
| UI pattern | Best for | Not for | Name used in code |
|---|---|---|---|
| Modal Dialog | Use it for a short choice or small task that must get full attention. | Never open one dialog on top of another or use one for normal, low-risk information. | <dialog> / role="dialog" aria-modal="true" |
| Popover | Use it when the content belongs beside its trigger and people can keep using the page. | Never use it for a short label-only hint. Use a tooltip instead. | popover attribute / Popover |
Before you ship
- 01
Write down what the person needs to do.
- 02
Test the keyboard, focus, touch, zoom, loading, empty, and error states.
- 03
Make sure people can get the same information without hover or motion.
- 04
Test with real content on both small and large screens.
Comparison request you can copy
Copy this when your team needs help choosing between the patterns.
Choose the best pattern from Modal Dialog, Popover for our real user flow. Use this rule: A modal stops the page until the task is done. A popover stays beside its button and lets the page keep working. Write down the task, amount of content, and cost of stopping the flow. Check keyboard, touch, loading, error, and reduced-motion behavior. Explain your choice, then build the smallest accessible version with the project's design system.