Components

Alert Dialog

Alert dialog on Base UI: Dialog's paper and rules, no corner close, Action and Cancel are Buttons, focus trapped.

Install

bash

npx shadcn add @eloquent/alert-dialog

Usage

tsx

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

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

Label the action with what it does ("Delete story"), not "OK". AlertDialogAction and AlertDialogCancel are Buttons that close the dialog; put the work in onClick.

States

Destructive confirm

Non-destructive confirm

State	Treatment
Open	Paper popup, 1px ink rule, 3px top rule; backdrop paper at 85%, no blur
Destructive action	Ink fill, ✕ icon and a label naming the action; never red
Focus	2px ink outline, 2px offset
Dismissal	No corner ✕ and no outside-press dismissal

Keyboard

Key	Action
Tab / Shift+Tab	From the page, reach the trigger. While open, move between the two buttons; focus wraps and never leaves the dialog
Enter / Space	Open from the trigger; activate a button
Esc	Close without acting; focus returns to the trigger

Vietnamese

Ink adaptation

Upstream shadcn's shadow, radius and dark overlay are removed. The popup is paper with a 1px ink rule and a 3px top rule, as Dialog; there is no corner close because an alert needs an answer. The destructive action is an ink fill with a ✕ icon and a label that names the action. Built on Base UI AlertDialog.