# AlertDialogHeader

> `AlertDialogHeader` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`.

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

`AlertDialogHeader` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`.

## Import

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

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

## Usage

```tsx
<AlertDialogHeader
  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

This component declares no props of its own.

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`