AlertDialogContent

The panel: role="alertdialog", no close button, outside presses ignored, focus on Cancel.

Import

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

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

Usage

<AlertDialogContent
  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
children	ReactNode
material	"solid" | "glass" | "glass-clear" | "liquid" | "liquid-clear"
container	HTMLElement | null
className	string
classNames	Partial<Record<AlertDialogPart, string>>		Per-part classes: overlay and root apply here.

* 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