Skip to main content

​
Options

The Dialog supports a primary action, an optional secondary action, and a danger variant for destructive confirmations.

​
Actions

Omit secondaryAction 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

Set primaryAction’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 both primaryAction 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.

​
Keyboard Interaction

Users can navigate, scroll, and dismiss the Dialog using standard keyboard controls.
Last modified on July 24, 2026