AlertDialog

Guidelines#

Use it for deleting, disconnecting, sending to many people, spending credits. In app code prefer useConfirm() from ConfirmDialogProvider, which wraps this with the destructive treatment and a loading state; the Max audit still counts 14 window.confirm calls to replace.

What you provide: a title that names the object ("Delete “Q4 fintech outreach”?"), a description that states the consequence in numbers, a cancel that names what stays ("Keep campaign") and an action that repeats the verb ("Delete campaign") — destructive actions in destructive.

Facts#

API#

TypeScript declarations emitted from src/components/ui/alert-dialog.tsx (the module also exports its other parts).

declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): any;
declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): any;
declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): any;
declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): any;
declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): any;
declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): any;
declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): any;
declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): any;
declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): any;
declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>): any;
declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): any;
export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h(DC.AlertDialog, { defaultOpen: true },
    h(DC.AlertDialogTrigger, { asChild: true }, h(DC.Button, { variant: "destructive" }, "Delete campaign")),
    h(DC.AlertDialogContent, { onOpenAutoFocus: function (e) { e.preventDefault(); } },
      h(DC.AlertDialogHeader, null,
        h(DC.AlertDialogTitle, null, "Delete “Q4 fintech outreach”?"),
        h(DC.AlertDialogDescription, null, "Its 3 scheduled steps stop and 214 prospects leave the sequence. Replies stay in Unibox.")),
      h(DC.AlertDialogFooter, null,
        h(DC.AlertDialogCancel, null, "Keep campaign"),
        h(DC.AlertDialogAction, { className: "bg-destructive text-white hover:bg-destructive/90" }, "Delete campaign"))));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Overlays#