AlertDialogCancel

Closes the dialog. Takes initial focus. Label defaults to the localized “Cancel”.

Import

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

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

Usage

<AlertDialogCancel
  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
variant	"danger" | "primary" | "secondary" | "ghost"	"secondary"
size	"sm" | "md" | "lg"		sm is 30px and md (default) 38px, the heights every form control shares; lg is 52px.
loading	boolean		Busy state: the button keeps its focus and its full colour, ignores clicks (a submit button no longer submits, including the implicit submit from Enter in a field of its form) and is exposed as aria-disabled and aria-busy. It is not natively disabled, s…
loadingLabel	string		Replaces the children while loading and is announced to screen readers. Without it the children stay and the UI string loading is announced while loading.
block	boolean		Stretch to the full width of the container.
asChild	boolean		Render the child element (via Slot) instead of a <button>, e.g. a link.

* 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