AlertDialogTrigger

Element that opens the dialog; asChild merges onto your own button.

Import

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

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

Usage

<AlertDialogTrigger
  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
asChild	boolean

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

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