Coming soon
The confirmation pattern applies to: deleting data, clearing a cart, submitting an irreversible form, account cancellation, and other high-risk actions.
- Trigger — Typically a danger-style Button (Error type)
- Confirmation Dialog — Centered modal containing:
- Concise title (e.g. "Confirm deletion?")
- One-sentence consequence description (e.g. "This action cannot be undone")
- Cancel button (secondary) + Confirm button (destructive red)
- Button — Trigger and dialog action buttons
- Dialogs — Confirmation Dialog type
Do
- Use red/Error style for the confirm button to clearly communicate danger
- Focus the title on the action itself ("Delete product") rather than a question ("Are you sure?")
- Always provide a cancel path
Don't
- Don't overuse confirmation dialogs (non-destructive actions don't need them)
- Don't pre-select the "Confirm" button — default focus should be on "Cancel"
- Don't include extra secondary actions in the dialog
This page is a work in progress and will include an interactive Demo and full design specifications.
