AlertDialog
OverlaysModal dialog for irreversible or high-impact actions that require explicit user confirmation, like deleting data.
import { AlertDialog } from "@cohere-ai/waypoint-ui/alert-dialog";Live Preview
Props
| Name | Type | Default | Description |
|---|---|---|---|
overlayClassName | string | - | CSS classes applied to the backdrop overlay (on AlertDialogContent) |
variant (AlertDialogAction) | Button variant | - | AlertDialogAction accepts all Button variant/size props. Defaults to primary. |
variant (AlertDialogCancel) | Button variant | 'outline' | AlertDialogCancel accepts all Button props. Defaults to outline. |
Examples
Confirmation Dialog
Destructive action confirmation with cancel and confirm buttons
1 import { 2 AlertDialog, AlertDialogTrigger, AlertDialogContent, 3 AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, 4 AlertDialogDescription, AlertDialogAction, AlertDialogCancel, 5 } from '@cohere-ai/waypoint-ui/alert-dialog'; 6 7 <AlertDialog> 8 <AlertDialogTrigger asChild> 9 <Button variant="destructive">Delete account</Button> 10 </AlertDialogTrigger> 11 <AlertDialogContent> 12 <AlertDialogHeader> 13 <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> 14 <AlertDialogDescription> 15 This action cannot be undone. This will permanently delete your account. 16 </AlertDialogDescription> 17 </AlertDialogHeader> 18 <AlertDialogFooter> 19 <AlertDialogCancel>Cancel</AlertDialogCancel> 20 <AlertDialogAction variant="destructive">Delete account</AlertDialogAction> 21 </AlertDialogFooter> 22 </AlertDialogContent> 23 </AlertDialog>
Additional Resources
Accessibility
Keyboard Navigation
Focus is trapped within the dialog. Escape key closes and cancels.
ARIA Attributes
aria-labelledby wired to AlertDialogTitlearia-describedby wired to AlertDialogDescriptionNote: AlertDialogAction and AlertDialogCancel are announced with their role.
Design Guidelines
Do
Use for irreversible or high-impact actions (delete, revoke, publish).
Make the cancel action the default focused element.
Don't
Use for routine confirmations — use a Dialog or Popover instead.
Use vague button labels; be specific ("Delete account", not "OK").
Found an Issue?
If you've encountered a bug or have feedback about the AlertDialog component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.