Destructive Action Modal

A confirmation gate before irreversible actions.

Default

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="destructive" />}>Delete note</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete this note?</AlertDialogTitle>
      <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Variants

{/* async action with a loading spinner and inline error */}
<AlertDialogAction variant="destructive" disabled={loading} onClick={handleDelete}>
  {loading ? (<><Spinner />Deleting…</>) : "Delete"}
</AlertDialogAction>
{error && <p className="text-sm text-error">Couldn't delete the note.</p>}

{/* compact dialog with media */}
<AlertDialogContent size="sm">
  <AlertDialogHeader>
    <AlertDialogMedia><TriangleAlert /></AlertDialogMedia>
    …
  </AlertDialogHeader>
</AlertDialogContent>

Delete (async) shows a spinner while the request runs and an inline error if it fails (Loading, With error). Archive is a reversible action — non-destructive styling, recoverable copy (Reversible). Small with media uses size="sm" (Small) plus AlertDialogMedia (Media), together covering Small with Media.

Markdown for agents: /design/destructive-action-modal.md · spec: /design.md