AlertDialogRoot

Root of a composed alert dialog; owns the open state and the focus return.

Import

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

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

Usage

<AlertDialogRoot
  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)
children	ReactNode		AlertDialog.Trigger and AlertDialog.Content.

* 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