Options
The Dialog supports a primary action, an optional secondary action, and a danger variant for destructive confirmations.Actions
OmitsecondaryAction for a single-action, acknowledge-only dialog — the lone action sits at the trailing edge of the footer. Pass both for a confirm/cancel pair, as in the hero example above.
Action Variants
Primary Action
primaryAction defaults to variant: "primary", rendering the standard confirm treatment.
Danger Action
SetprimaryAction’s variant to "danger" for a destructive confirmation — it renders the critical (red) Button so the risk of the action is visually distinct.
No Actions
Omit bothprimaryAction and secondaryAction for a footerless dialog — useful for a media preview or informational dialog where the header’s X close button is the only dismiss affordance.
Behavior
The Dialog traps focus while open and scrolls its own body independently of the pinned header and footer.Scrolling Body
Body content beyond 90% of the viewport height scrolls within the dialog while the header and footer stay pinned.Usage Guidelines
When to Use
Use the Dialog when:- Confirming a decision before continuing – The user must confirm or cancel, such as leaving a page with unsaved changes. Pair a primary action with a secondary action.
- Confirming a destructive action – The action deletes data or can’t be undone. Use the danger primary action so the risk is visually distinct.
- Acknowledging a message – The user only needs to read the content and dismiss it. Use a single primary action.
- Previewing media or information – Content such as an attachment preview needs a focused view with no footer actions. The header close button dismisses it.
When not to use
Avoid using the Dialog for:- Presenting forms, lists, or composed layouts – Dialog content is message-style: text, phrasing content, or rendered Markdown. Use the Bottom Sheet instead.
- Asking a clarifying question before the agent continues – Use the Agent Prompt instead, which asks inline in place of the Prompt Bar.