# AlertDialog

Modal dialog that interrupts the user with critical information requiring immediate action

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  Button,
} from "@databricks/appkit-ui/react"

export default function AlertDialogExample() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Show Dialog</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

```

## AlertDialog[​](#alertdialog-1 "Direct link to AlertDialog")

Modal dialog that interrupts the user with critical information requiring immediate action

**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx)

### Props[​](#props "Direct link to Props")

| Prop           | Type                        | Required | Default | Description |
| -------------- | --------------------------- | -------- | ------- | ----------- |
| `defaultOpen`  | `boolean`                   |          | -       | -           |
| `open`         | `boolean`                   |          | -       | -           |
| `onOpenChange` | `((open: boolean) => void)` |          | -       | -           |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { AlertDialog } from '@databricks/appkit-ui';

<AlertDialog /* props */ />

```

## AlertDialogAction[​](#alertdialogaction "Direct link to AlertDialogAction")

Primary action button that confirms the alert

**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx)

### Props[​](#props-1 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-1 "Direct link to Usage")

```tsx
import { AlertDialogAction } from '@databricks/appkit-ui';

<AlertDialogAction /* props */ />

```

## AlertDialogCancel[​](#alertdialogcancel "Direct link to AlertDialogCancel")

Cancel button that dismisses the alert dialog

**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx)

### Props[​](#props-2 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-2 "Direct link to Usage")

```tsx
import { AlertDialogCancel } from '@databricks/appkit-ui';

<AlertDialogCancel /* props */ />

```

## AlertDialogContent[​](#alertdialogcontent "Direct link to AlertDialogContent")

Main content container for the alert dialog

**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx)

### Props[​](#props-3 "Direct link to Props")

| Prop               | Type                                   | Required | Default | Description                                                                                                           |
| ------------------ | -------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
| `asChild`          | `boolean`                              |          | -       | -                                                                                                                     |
| `forceMount`       | `true`                                 |          | -       | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
| `onEscapeKeyDown`  | `((event: KeyboardEvent) => void)`     |          | -       | Event handler called when the escape key is down. Can be prevented.                                                   |
| `onFocusOutside`   | `((event: FocusOutsideEvent) => void)` |          | -       | Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.                        |
| `onOpenAutoFocus`  | `((event: Event) => void)`             |          | -       | Event handler called when auto-focusing on open. Can be prevented.                                                    |
| `onCloseAutoFocus` | `((event: Event) => void)`             |          | -       | Event handler called when auto-focusing on close. Can be prevented.                                                   |

### Usage[​](#usage-3 "Direct link to Usage")

```tsx
import { AlertDialogContent } from '@databricks/appkit-ui';

<AlertDialogContent /* props */ />

```

## AlertDialogDescription[​](#alertdialogdescription "Direct link to AlertDialogDescription")

Descriptive text explaining the alert

**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx)

### Props[​](#props-4 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-4 "Direct link to Usage")

```tsx
import { AlertDialogDescription } from '@databricks/appkit-ui';

<AlertDialogDescription /* props */ />

```

## AlertDialogFooter[​](#alertdialogfooter "Direct link to AlertDialogFooter")

Footer section containing action buttons

**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx)

### Props[​](#props-5 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-5 "Direct link to Usage")

```tsx
import { AlertDialogFooter } from '@databricks/appkit-ui';

<AlertDialogFooter /* props */ />

```

## AlertDialogHeader[​](#alertdialogheader "Direct link to AlertDialogHeader")

Header section containing title and description

**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx)

### Props[​](#props-6 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-6 "Direct link to Usage")

```tsx
import { AlertDialogHeader } from '@databricks/appkit-ui';

<AlertDialogHeader /* props */ />

```

## AlertDialogOverlay[​](#alertdialogoverlay "Direct link to AlertDialogOverlay")

Background overlay that dims content behind the alert dialog

**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx)

### Props[​](#props-7 "Direct link to Props")

| Prop         | Type      | Required | Default | Description                                                                                                           |
| ------------ | --------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
| `asChild`    | `boolean` |          | -       | -                                                                                                                     |
| `forceMount` | `true`    |          | -       | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |

### Usage[​](#usage-7 "Direct link to Usage")

```tsx
import { AlertDialogOverlay } from '@databricks/appkit-ui';

<AlertDialogOverlay /* props */ />

```

## AlertDialogPortal[​](#alertdialogportal "Direct link to AlertDialogPortal")

Portal container for rendering alert dialog content outside the DOM hierarchy

**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx)

### Props[​](#props-8 "Direct link to Props")

| Prop         | Type                                  | Required | Default | Description                                                                                                           |
| ------------ | ------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
| `container`  | `Element \| DocumentFragment \| null` |          | -       | Specify a container element to portal the content into.                                                               |
| `forceMount` | `true`                                |          | -       | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |

### Usage[​](#usage-8 "Direct link to Usage")

```tsx
import { AlertDialogPortal } from '@databricks/appkit-ui';

<AlertDialogPortal /* props */ />

```

## AlertDialogTitle[​](#alertdialogtitle "Direct link to AlertDialogTitle")

Title heading for the alert dialog

**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx)

### Props[​](#props-9 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-9 "Direct link to Usage")

```tsx
import { AlertDialogTitle } from '@databricks/appkit-ui';

<AlertDialogTitle /* props */ />

```

## AlertDialogTrigger[​](#alertdialogtrigger "Direct link to AlertDialogTrigger")

Button that triggers the alert dialog to open

**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx)

### Props[​](#props-10 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-10 "Direct link to Usage")

```tsx
import { AlertDialogTrigger } from '@databricks/appkit-ui';

<AlertDialogTrigger /* props */ />

```