Overlays · §5.20

Alert dialog

Destructive confirmation with Cancel first.

Theme
Contrast
Language
Motion
Text size

Code

<AlertDialog>…<AlertDialogCancel autoFocus>Cancel</AlertDialogCancel><AlertDialogAction variant="destructive">Revoke link</AlertDialogAction></AlertDialog>

Accessibility

  • Focus starts on the least destructive action.

Usage

Do

  • Destructive, irreversible and privacy actions.

Don't

  • Never a confirmation before "I feel worse" sends.

Platforms

Web
apps/web/components/ui/alert-dialog.tsx
iOS
SwiftUI .confirmationDialog
Android
Compose AlertDialog