Alert Dialog

A modal dialog that interrupts the user with important content and expects an explicit confirm-or-cancel response before proceeding.

Basic usage

Wrap a trigger and content. Radix manages the open state, focus trap, and dismissal for you.

Destructive action

For irreversible actions, open from a destructive button and restyle AlertDialogAction by re-running buttonVariants. Do not hand-write the red: --destructive is the only red pinned across both palettes that carries a foreground colour.

ConfirmDialog composite

The package ships ConfirmDialog, a Tier 2 composite that wraps this component so every app asks the same way. It adds the icon slot, the destructive treatment, and an async onConfirm: while the promise is in flight the confirm button is disabled and the dialog refuses to close, so a slow API cannot be deleted twice. A throw keeps the dialog open and is handed to onError. The confirm, cancel and pending labels default to a generic “Confirm”, “Cancel” and “Working…”, which follow the language of the nearest ComitorLocaleProvider. Name the action instead, as below — and once you set confirmLabel, set pendingLabel too, or “Remove” turns into “Working…” mid-action.

AlertDialog Props

Prop	Kiểu	Mặc định	Mô tả
`open`	boolean	—	Controlled open state of the dialog. Omit to let Radix manage it internally.
`defaultOpen`	boolean	`false`	Open state when initially rendered, for uncontrolled usage.
`onOpenChange`	(open: boolean) => void	—	Called when the open state changes (trigger, cancel, action, or Escape).
`children`bắt buộc	React.ReactNode	—	Trigger and content. There is no modal prop — an alert dialog is always modal.

Parts

Prop	Kiểu	Mặc định	Mô tả
`AlertDialogTrigger`	AlertDialogPrimitive.Trigger	—	The control that opens the dialog. Use asChild to render your own Button.
`AlertDialogPortal`	AlertDialogPrimitive.Portal	—	Portal target. AlertDialogContent renders one already — reach for it only for a custom shell.
`AlertDialogOverlay`	AlertDialogPrimitive.Overlay	—	Dimmed backdrop (bg-ink/60, dark:bg-ink/80, backdrop-blur). Also rendered for you by AlertDialogContent.
`AlertDialogContent`	AlertDialogPrimitive.Content	—	The modal panel: portal + overlay + card surface. Fixed at sm:max-w-lg — unlike Dialog it takes no size prop and shows no corner close button. Radix Content props pass through; an onCloseAutoFocus runs before the package's focus return and, with event.preventDefault(), decides where focus goes.
`AlertDialogHeader`	div	—	flex flex-col gap-2, centred on mobile and left-aligned from sm up.
`AlertDialogTitle`	AlertDialogPrimitive.Title	—	Accessible name for the panel. Required — Radix warns when it is missing.
`AlertDialogDescription`	AlertDialogPrimitive.Description	—	Supporting text linked to the panel via aria-describedby.
`AlertDialogFooter`	div	—	Actions row: stacked and reversed on mobile, right-aligned from sm up.
`AlertDialogAction`	AlertDialogPrimitive.Action	—	Confirming button. Pre-styled with buttonVariants() — the default gold button; closes the dialog on click.
`AlertDialogCancel`	AlertDialogPrimitive.Cancel	—	Dismissing button. Pre-styled with buttonVariants({ variant: "outline" }); receives initial focus and closes the dialog.
`className`	string	—	Additional Tailwind classes merged onto any part with cn().

ConfirmDialog Props

Prop	Kiểu	Mặc định	Mô tả
`title`bắt buộc	ReactNode	—	Headline of the confirmation, rendered as AlertDialogTitle.
`onConfirm`bắt buộc	() => void \| Promise<void>	—	Runs on confirm. Return a promise and the dialog stays open in a pending state until it settles — closing first and calling the API after is the reliable way to get a double delete.
`description`	ReactNode	—	Supporting text under the title.
`children`	ReactNode	—	Extra content between header and footer — the list of affected records, a reason field.
`trigger`	ReactNode	—	Element that opens the dialog; wrapped in AlertDialogTrigger asChild.
`icon`	ComponentType<{ className?: string }>	—	Optional leading icon, shown in a tinted square (destructive uses bg-destructive/15 with the -ink step).
`variant`	'default' \| 'destructive'	`'default'`	destructive paints the confirm button red — use it for delete and revoke.
`confirmLabel`	string	`'Confirm'`	Confirm button text. The default follows ComitorLocaleProvider (“Xác nhận” under locale="vi"); a verb that names the action — Remove, Delete — reads better.
`cancelLabel`	string	`'Cancel'`	Cancel button text. Follows the provider the same way (“Hủy” under locale="vi").
`pendingLabel`	string	`'Working…'`	Confirm button text while an async onConfirm is in flight (“Đang xử lý…” under locale="vi"). Set it whenever you set confirmLabel, or the button swaps your verb for the generic phrase at the very moment the user is watching it.
`confirmDisabled`	boolean	`false`	Locks the confirm button, e.g. until the user has typed the record name.
`open`	boolean	—	Controlled open state. Leave it out and the dialog manages its own, paired with trigger.
`onOpenChange`	(open: boolean) => void	—	Called when the dialog opens or closes. Closing is ignored while onConfirm is pending.
`onError`	(error: unknown) => void	—	Receives a throw from onConfirm so the app can raise a toast; without it the error is logged. The dialog stays open either way so the user can retry.
`className`	string	—	Merged onto AlertDialogContent.

Accessibility

Built on Radix Alert Dialog: the content is rendered with role="alertdialog" and focus is trapped inside while open.
AlertDialogTitle and AlertDialogDescription are wired to aria-labelledby and aria-describedby automatically — always include a Title.
Unlike a regular dialog, clicking the overlay does nothing: the user has to pick Cancel or the action. Escape still closes, which counts as cancelling.
The Cancel button receives initial focus. On close, focus returns to the AlertDialogTrigger — or, with no Trigger, to the element that had focus just before the dialog opened, and to the menu’s trigger button when that was a DropdownMenu item, which unmounts with the menu. Radix only covers the Trigger; AlertDialogContent adds the rest since 3.3.1, fields with autoFocus included, and ConfirmDialog inherits it. The rules are Dialog’s: an opener that is gone gets no guess, and your own onCloseAutoFocus runs first and wins — keep one that sends focus elsewhere, drop one that only re-focused the opener.
There is no corner close button and no size prop — the panel is always sm:max-w-lg. Reach for Dialog when the user should be able to walk away.