Alert Dialog

Confirm dialog on the native dialog element. Cancel takes focus; type-to-confirm lights the action up.

Installs motion.

Delete this project

Removes every deployment, domain and log for good.

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/alert-dialog.json

Usage

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

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="ghost">Revoke</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Revoke this key?</AlertDialogTitle>
      <AlertDialogDescription>Requests signed with it fail right away.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="danger">Revoke key</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Examples

Destructive

Without confirmText the red tube is lit from the start. Cancel still takes focus.

Important, not destructive

The default variant follows the accent, for actions you can't take back that aren't deletions.

API reference

AlertDialog

Holds the open state and the typed confirmation. Renders no element of its own.

Prop	Type	Default
`open`	`boolean` Controlled open state.	None
`defaultOpen`	`boolean` Initial state when uncontrolled.	`false`
`onOpenChange`	`(open: boolean) => void` Called by the trigger, Cancel, Action and Escape. Never by a click outside.	None
`confirmText`	`string` Text that has to be typed into AlertDialogConfirmInput before the action unlocks. Cleared on every open.	None
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	inherited

AlertDialogContent

The overlay and panel in a native <dialog role="alertdialog">. Other props go to the panel.

Prop	Type	Default
`size`	`"sm" \| "md"` Maximum panel width: 400 or 460px. Docks to the bottom edge below 640px.	`"sm"`
`initialFocus`	`"cancel" \| "action" \| "confirm"` What takes focus on open. Action only if it's already enabled.	`"cancel"`

AlertDialogAction

The confirming button. Closes the dialog after onClick unless the handler calls event.preventDefault().

Prop	Type	Default
`variant`	`"default" \| "danger"` Danger is a red tube regardless of the dialog's color, and turns the confirmation input red too.	`"default"`
`loading`	`boolean` Shows a spinner and ignores further presses, e.g. while a delete request runs.	`false`
`disabled`	`boolean` Keeps the tube unlit. It's also unlit while confirmText doesn't match.	`false`

AlertDialogConfirmInput

Collects confirmText. Enter presses the action once it matches. Accepts native input attributes.

Prop	Type	Default
`label`	`ReactNode` Replaces the default label, which spells out confirmText and lights each matched letter.	`"Type … to confirm"`

AlertDialogTrigger, AlertDialogCancel

Buttons that open and cancel. Both accept native button attributes.

Prop	Type	Default
`asChild`	`boolean` Merges the behaviour onto the single child element instead of rendering a button.	`false`

AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter

Layout and text parts. Each accepts the native attributes of its element.

Prop	Type	Default
`AlertDialogTitle`	`h2` Names the dialog through aria-labelledby.	None
`AlertDialogDescription`	`p` Describes it through aria-describedby. <strong> inside is set brighter for the facts that matter.	None
`AlertDialogFooter`	`div` Stacks the action above Cancel on small screens, right-aligns both from sm up.	None

Accessibility

Renders a native modal <dialog> with role="alertdialog", so focus is trapped and the page behind is inert.
Cancel takes focus on open, so a stray Enter never confirms.
Escape cancels. A click outside doesn't close it; the panel nudges instead, or dims briefly with reduced motion.
Focus returns to the element that opened it, and page scroll is locked while it's open.