Skip to content

  • VisualizationPage · Index
  • What’s newPage · Latest additions
  • Styles indexPage · Home
  • Compare stylesPage · Side by side
  • Patterns indexPage · Index
  • Articles indexPage · Index
  • Folio design systemPage · House system
  • Folio FoundationsPage · House system
  • Folio ComponentsPage · House system
  • Folio PatternsPage · House system
  • Folio MotionPage · House system
  • Folio ExamplesPage · House system
  • Folio ButtonsPage · Component
  • Folio Text fieldsPage · Component
  • Folio SelectPage · Component
  • Folio Checkboxes & switchesPage · Component
  • Folio Radio groupsPage · Component
  • Folio TabsPage · Component
  • Folio MenusPage · Component
  • Folio DialogsPage · Component
  • Folio TooltipsPage · Component
  • Folio Breadcrumbs & paginationPage · Component
  • Folio CardsPage · Component
  • Folio Badges & avatarsPage · Component
  • Folio Data tablesPage · Component
  • Folio Progress & loadingPage · Component
  • Folio FeedbackPage · Component
  • Folio Empty statesPage · Component
  • Folio MediaPage · Component
← UI patterns

Modal / Dialog

A focused surface that opens above a page and blocks interaction with the content behind it.

Save changes?

Your edits to this draft will be kept and you can return to them later.

Opening moves focus into the dialog. Closing returns it to the trigger.

Delete project?

This permanently removes the project and all of its files. This cannot be undone.

Initial focus is placed on the non-destructive action.

Parts of a modal dialog

1
2
3

Delete project?

This permanently removes the project and its files.

4CancelDelete
  1. 1BackdropPrevents background interaction
  2. 2DialogContains the focused task
  3. 3Title and bodyIdentifies the purpose
  4. 4ActionsComplete or cancel

Keyboard focus and dismissal

  1. 01OpenTrigger activates
  2. 02EnterFocus moves in
  3. 03ContainTab cycles inside
  4. 04CloseEsc or action
  5. 05ReturnFocus returns
Use a modal for
  • Destructive confirmations
  • Short, focused tasks
  • A response required before continuing
Keep content inline for
  • Passive information
  • Long or multi-step flows
  • Routine marketing prompts

Reference screenshots

The APG Add Delivery Address dialog open over a dimmed page: a centered white surface with a titled address form and Verify Address, Add, and Cancel buttons.
APG modal dialog exampleW3C WAI
MDN's native dialog example open: a white bordered modal with a Close button and the text This modal dialog has a groovy backdrop, sitting over a colorful gradient ::backdrop.
MDN dialog elementMozilla
Material Design 3 dialog illustration: a basic dialog with a headline, supporting text, and two text buttons over a dimmed scrim, beside a full-screen dialog with a close icon, title, Save action, and a form.
Material Design 3 dialogsGoogle

Use it

Figma
A dialog component with a scrim and surface
  1. Make a viewport-sized frame as the scrim, filled black at roughly 40 to 50 percent opacity.
  2. Inside, place the surface: a vertical Auto Layout frame at a fixed comfortable width, with padding, a corner radius, and an elevation shadow.
  3. Stack three sections: a header (title plus an optional close X pushed right), a body that fills the width, and a right-aligned footer row of Cancel and Confirm.
  4. Make it a component set with a Type variant: dialog (neutral) and alertdialog (a leading status icon and an emphasized or destructive confirm).

Keep the safe action visually dominant and place destructive actions so they are not the easy default, mirroring the focus-the-safe-option rule.

Center the surface and keep it on top
  1. Put the scrim frame at the top of the layer stack so it sits above page content.
  2. Set the scrim's constraints to Left and Right, Top and Bottom, so it stretches to any viewport.
  3. Center the surface using the scrim's Auto Layout alignment set to center, center.
  4. Keep the surface width Fixed and height Hug so it grows with content while staying centered.

Build the scrim and surface as one component so prototypes always bring the backdrop along with the dialog.

Research notes & sources
Variants
Modal dialogNon-modal dialogAlertdialogFull-screen modal / sheet
  1. Dialog (Modal) Pattern (ARIA Authoring Practices Guide)W3C WAI
  2. Dialog (Modal) Pattern ExampleW3C WAI
  3. <dialog>: The Dialog elementMDN Web Docs
  4. Modal & Nonmodal Dialogs: When & How to UseNielsen Norman Group
  5. DialogsMaterial Design 3 (Google)
  6. Modality (Human Interface Guidelines)Apple
  7. Having an open dialog
  8. Where to Put Focus When Opening a Modal Dialog