Docs draft
ConfirmDialog
Component storyFigma component ↗React component ↗DSDS entity ↗
When to use it
useDestructive or costly decisions that deserve a pause: remove a list, cancel membership.
avoidReversible actions — undo beats asking permission.
toast With undo.Guidelines
mustTitle asks the question; body states the consequence; button labels name the outcomes (Remove / Keep list), never OK / Cancel. — Screen readers and skimmers both act on the buttons alone.
mustThe safe action is the ghost Button; the consequential one is primary. — One primary per view — the decision IS the view.
Design specifications
| surface | Modal narrow (480) |
| body | type.body in color.text.secondary, centered |
| actions | ghost + primary Button, CENTERED (the old mature-gate pattern: decline left, confirm right), space.12 gap |
Accessibility
Escape — Declines — never confirms.
Inherits the native dialog semantics from Modal.