UI Components

Modal

A focused box that appears above the page and asks someone to complete or dismiss a task.

Also called DialogModal dialogPopup windowBox over the page

Visual Example

Try it: open the modal, then close it.

Confirm changes

This focused dialog blocks the page until it is dismissed.

Plain Definition

Modals interrupt the current page so a person can handle one focused task.

Use them carefully. If the content does not need immediate attention, a normal page section may be easier to use.

You Might Describe This As...

  • "popup that blocks the page"
  • "box that appears over everything"
  • "dialog I have to close"
  • "window asking me to confirm"

Fast lookup

You May Also Mean

People often say popup for any overlay. A modal is the specific version that blocks the page until the person responds.

Popup

Check the name, visual cue, and typical use.

Modal vs Popup

See the practical difference side by side.

Toast Message vs Modal

See the practical difference side by side.

What It Is Used For

  • Confirming a risky action
  • Completing a short form
  • Showing focused details without leaving the page

Example User Phrasing

  • "Show a box over the page to confirm deletion."
  • "Open a dialog where they can edit this item."