Confirmation Dialog
ProA modal variant specifically designed for confirming destructive or irreversible actions before execution. Features a clear warning message, a description of consequences, and two distinct actions: a danger-styled confirm button and a safe cancel button. The confirm button label should describe the specific action — "Delete project" not "OK". Default focus lands on the cancel button to prevent accidental confirmation.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | ||
| Danger | Red-toned confirmation for destructive actions like delete or revoke. | Use for delete, revoke, remove, or permanently destructive operations. |
| With Input |
Usage Guidelines
Clearly describe what will happen if the user confirms the action.
Use generic labels like "OK" and "Cancel" — be specific about the action.
Use specific button labels — "Delete project" not just "OK".
Require confirmation for routine, easily reversible actions.
Focus the cancel/safe action by default, not the destructive one.
Auto-dismiss the dialog on a timer — the user must explicitly choose.
Trap focus within the dialog and return focus on close.
Place the destructive action on the left — it should be on the right (trailing position).
Code
Design Tokens
Accessibility
- Use role="alertdialog" with aria-modal="true" — this signals urgency to assistive tech.
- Provide aria-labelledby pointing to the title and aria-describedby pointing to the description.
- Focus must be trapped within the dialog.
- On open, focus should move to the cancel/safe button, not the destructive action.
- On close, return focus to the element that triggered the dialog.
- Escape key should trigger the cancel action, not the confirm action.
- Clear destructive action labelling — button text must describe the action.