# AlertDialogCancel

> Closes the dialog.

Source: https://ui.jcsoftdev.com/docs/components/alert-dialog-cancel

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

## Import

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

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

## Usage

```tsx
<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](/storybook/?path=/story/overlays-alertdialog--default)
- [Escape Cancels](/storybook/?path=/story/overlays-alertdialog--escape-cancels)
- [Outside Press Does Nothing](/storybook/?path=/story/overlays-alertdialog--outside-press-does-nothing)
- [Confirm Runs Once And Closes](/storybook/?path=/story/overlays-alertdialog--confirm-runs-once-and-closes)
- [Pending Blocks Every Way Out](/storybook/?path=/story/overlays-alertdialog--pending-blocks-every-way-out)
- [Returned Failure Keeps It Open](/storybook/?path=/story/overlays-alertdialog--returned-failure-keeps-it-open)
- [Thrown Failure Shows Generic Message](/storybook/?path=/story/overlays-alertdialog--thrown-failure-shows-generic-message)
- [Focus On Confirm](/storybook/?path=/story/overlays-alertdialog--focus-on-confirm)
- [Controlled](/storybook/?path=/story/overlays-alertdialog--controlled)
- [In Spanish](/storybook/?path=/story/overlays-alertdialog--in-spanish)
- [Confirm Disabled](/storybook/?path=/story/overlays-alertdialog--confirm-disabled)
- [Cancel Disabled](/storybook/?path=/story/overlays-alertdialog--cancel-disabled)
- [Composed](/storybook/?path=/story/overlays-alertdialog--composed)
- [Composed Escape And Outside](/storybook/?path=/story/overlays-alertdialog--composed-escape-and-outside)
- [Composed Action Can Keep It Open](/storybook/?path=/story/overlays-alertdialog--composed-action-can-keep-it-open)

## Source

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