Skip to content
Overlays

AlertDialog

One hard-to-undo decision: delete, discard, overwrite.

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from "@flinbu/seed";

Delete a token

The title asks with the exact object; the action repeats its verb.

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Button } from "@flinbu/seed";
import { Trash2 } from "lucide-react";

<AlertDialog>
  <AlertDialogTrigger asChild><Button variant="destructive" leftIcon={<Trash2 />}>Delete token</Button></AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete brand-500?</AlertDialogTitle>
      <AlertDialogDescription>8 tokens point to it and will lose their value. You can’t undo this.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter><AlertDialogCancel /><AlertDialogAction>Delete</AlertDialogAction></AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Use it for

  • Confirming something that can't be undone.

Use something else for

  • Things that can be undone: do it and offer Undo in a toast.

Props

PropTypeDefaultDescription
AlertDialogContent: size'sm''md''sm'384 or 512px.
AlertDialogAction: variant'destructive''primary''destructive'Weight of the action.
AlertDialogCancel: childrenReactNode'Cancel'Always Cancel.

Accessibility

  • Built on Radix AlertDialog: role alertdialog, Cancel is focused first, there's no close button and clicking outside doesn't dismiss it.