Cognition

Components

Alert Dialog

A modal that interrupts the reader with a critical decision. It blocks all other interaction and requires an explicit confirm or cancel before anything else can happen.

Alert Dialog is for destructive or irreversible actions only. For general content, forms, and non-critical interactions, use Dialog. An Alert Dialog always carries two explicit actions, confirm and cancel. Never ship a single-button Alert Dialog.

Preview

Rendered with live Cognition tokens. Press the button to open the real modal, no dark: classes.

Variants

Discard changes?

Your edits will be lost if you leave without saving.

<AlertDialogAction>Continue</AlertDialogAction>

Delete chat?

This permanently deletes the conversation and its history. This cannot be undone.

<AlertDialogAction
  className={buttonVariants({ variant: "destructive" })}
>
  Delete
</AlertDialogAction>

The default confirms a serious but neutral action. The destructive variant styles the confirm button with the danger token for deletes and removals.

States

Closed. Only the trigger shows.

Discard changes?

Your edits will be lost if you leave without saving.

Open. The modal blocks the page.

Discard changes?

Your edits will be lost if you leave without saving.

Confirm hover (shown statically).

Discard changes?

Your edits will be lost if you leave without saving.

Cancel hover (shown statically).

The dialog traps focus while open, so the page behind it cannot be reached until the reader confirms or cancels.

API

Component
Description
AlertDialog
Root that controls the open state.
AlertDialogTrigger
The element that opens the dialog.
AlertDialogContent
The modal surface, with a blocking overlay.
AlertDialogHeader
Wraps the title and description.
AlertDialogFooter
Wraps the two actions, aligned right.
AlertDialogTitle
The required heading naming the decision.
AlertDialogDescription
Explains the consequence of the action.
AlertDialogAction
The confirm button. Add the destructive style for danger.
AlertDialogCancel
The cancel button. Always present.

Compose the parts inside one AlertDialog. Both AlertDialogAction and AlertDialogCancel close the dialog on click.

Don't and Do

Don't

Don't interrupt with an Alert Dialog for something reversible or low-stakes. Stopping the reader to confirm a harmless, undoable action trains them to dismiss the dialog without reading it. Use a Dialog for ordinary content, or a Toast to confirm after the fact.

Do
<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete account</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete this account?</AlertDialogTitle>
      <AlertDialogDescription>
        This cannot be undone. All data is removed permanently.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Use it when the action cannot be undone and the consequence is significant, like deleting an account, removing data, or cancelling a subscription.

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";

export function ConfirmDelete() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="destructive">Delete</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}