AlertDialog

Modal that interrupts to ask for a decision before something consequential (WAI-ARIA alertdialog). Pass title and onConfirm for the props API, or compose AlertDialog.Root with Trigger, Content, Title, Description, Cancel and Action. There is no close button and a press outside does nothing: the user answers with Cancel, Escape or Confirm. While onConfirm is pending, every way out is disabled so the action runs exactly once.

Import

import { AlertDialog } from "@jcsoftdev/ui/overlays";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/overlays/alert-dialog.

Usage

<AlertDialog
  trigger={<Button variant="danger">Delete appointment</Button>}
  title="Delete this appointment?"
  description="Marco Salazar will be notified and the slot becomes free."
  confirmLabel="Delete"
  tone="danger"
/>

Props

Prop	Type	Default	Description
open	boolean
defaultOpen	boolean	false
onOpenChange	((open: boolean) => void)
trigger	ReactElement<unknown, string | JSXElementConstructor<any>>		Element that opens the dialog. Omit it to drive the dialog with open.
confirmDisabled	boolean	false	Disables the confirm button, e.g. until a reason is typed. A pending confirm disables it anyway.
cancelDisabled	boolean	false	Disables the cancel button. Escape still cancels. A pending confirm disables it anyway.
title *	ReactNode		What is being asked, as a question or a verb phrase (“Delete this appointment?”).
description	ReactNode		The consequence, said plainly. Linked to the dialog with aria-describedby.
children	ReactNode		Extra content between the description and the buttons.
tone	"danger" | "default"	"default"	danger styles the confirm button as destructive.
confirmLabel	string		Defaults to the localized “Confirm”.
cancelLabel	string		Defaults to the localized “Cancel”.
onConfirm *	() => Promise<ConfirmResult> | Promise<void>		Runs on confirm. The dialog shows a pending state, ignores a second press and cannot be dismissed until it settles, then closes. Return { ok: false, error } or throw to keep it open with a message.
onCancel	(() => void)		Runs when the user cancels (Cancel button or Escape), not when a confirm succeeds.
initialFocus	"confirm" | "cancel"	"cancel"	Which button gets focus when the dialog opens. Cancel is the safe default.
material	"solid" | "glass" | "glass-clear" | "liquid" | "liquid-clear"		Surface material; see DialogContent.
container	HTMLElement | null		Portal target. Defaults to document.body; pass an element to keep a scoped data-style.
className	string
classNames	Partial<Record<AlertDialogPart, string>>		Per-part classes merged with cn; consumer classes win. className still targets the panel and is merged last.

* marks a required prop.

Storybook stories

• Default
• Escape Cancels
• Outside Press Does Nothing
• Confirm Runs Once And Closes
• Pending Blocks Every Way Out
• Returned Failure Keeps It Open
• Thrown Failure Shows Generic Message
• Focus On Confirm
• Controlled
• In Spanish
• Confirm Disabled
• Cancel Disabled
• Composed
• Composed Escape And Outside
• Composed Action Can Keep It Open

Source

packages/ui/src/overlays/alert-dialog/alert-dialog.tsx