Usage
A dialog is a modal surface that appears over app content and blocks everything behind it until the person answers. Use it for a decision that has to happen now, such as deleting something or granting a permission. Anything less urgent belongs somewhere quieter.
- Use for a decision that has to be made before anything else can continue.
- Keep the headline to the question being asked, and the supporting text to what happens next.
- Give the confirming action the trailing position, with cancel or dismiss beside it.
- Limit a dialog to two actions.
- Use for a message that only needs to be read (use an info card or a snackbar).
- Use to hold a set of options or a longer form (use a bottom sheet or a menu).
- Use to promote a feature (use a promo card or a CFR).
- Stack dialogs, or open one on top of another.
Usage comparison
|
Component |
Interruption |
Blocking |
Placement |
Best for… |
|---|---|---|---|---|
|
Snackbar |
Low |
No |
Floating: Bottom of screen, floating over content |
Lightweight, transient feedback after an action (save, undo, upload started, error retry, etc) |
|
Info card |
Low-medium |
No |
Inline: adjacent to the content it describes |
Persistent explanation of a state, scoped to a section or a screen |
|
Promo card |
Low-medium |
No |
Inline: in the content flow |
Promoting a Firefox feature someone hasn’t tried yet; optional and safe to dismiss |
|
Banner |
Medium |
No |
Inline: Top of content, below top app bar, inline with content |
Important, cross-screen or app-level issues needing attention + actions |
|
Dialog |
High |
Yes |
Blocking: Centered overlay taking focus |
Urgent, high-risk, or destructive decisions; anything that must be acknowledged now |
Design properties
| Property | Values | Default |
|---|---|---|
| Icon Variant | True | False | False |
| Type Variant | Basic | List | Basic |
| Show divider Boolean | true | false | undefined |
| Show title Boolean | true | false | true |
| Show secondary action Boolean | true | false | true |
Types
Basic
Use when the question and its consequence can be said in text alone.
List
Use when the person has to pick from a short, fixed set of choices.
Behavior and interaction
Behavior
- A dialog opens over the current screen and blocks everything behind it until the person chooses one of its actions.
- Turn off dismiss on back press and dismiss on outside touch when the decision is destructive or required. Leave both on for a confirmation the person can safely skip.
- Turn on the divider when the list in a List dialog can scroll, so the actions stay separate from the content.
Positioning
- Center the dialog on screen, inset from the edges, with a scrim behind it.
- At the largest text scale the actions wrap and stack, still trailing-aligned, and nothing is clipped.
Related components
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Aug 26, 2026 |
1.0.0 |
Initial draft of guidance |