Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# AlertDialog

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

## Example​

    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​

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

Source: `packages/appkit-ui/src/react/ui/alert-dialog.tsx`

### Props​

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

### Usage​

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

    <AlertDialog /* props */ />

## AlertDialogAction​

Primary action button that confirms the alert

Source: `packages/appkit-ui/src/react/ui/alert-dialog.tsx`

### Props​

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

### Usage​

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

    <AlertDialogAction /* props */ />

## AlertDialogCancel​

Cancel button that dismisses the alert dialog

Source: `packages/appkit-ui/src/react/ui/alert-dialog.tsx`

### Props​

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

### Usage​

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

    <AlertDialogCancel /* props */ />

## AlertDialogContent​

Main content container for the alert dialog

Source: `packages/appkit-ui/src/react/ui/alert-dialog.tsx`

### 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​

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

    <AlertDialogContent /* props */ />

## AlertDialogDescription​

Descriptive text explaining the alert

Source: `packages/appkit-ui/src/react/ui/alert-dialog.tsx`

### Props​

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

### Usage​

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

    <AlertDialogDescription /* props */ />

## AlertDialogFooter​

Footer section containing action buttons

Source: `packages/appkit-ui/src/react/ui/alert-dialog.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <AlertDialogFooter /* props */ />

## AlertDialogHeader​

Header section containing title and description

Source: `packages/appkit-ui/src/react/ui/alert-dialog.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <AlertDialogHeader /* props */ />

## AlertDialogOverlay​

Background overlay that dims content behind the alert dialog

Source: `packages/appkit-ui/src/react/ui/alert-dialog.tsx`

### 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​

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

    <AlertDialogOverlay /* props */ />

## AlertDialogPortal​

Portal container for rendering alert dialog content outside the DOM hierarchy

Source: `packages/appkit-ui/src/react/ui/alert-dialog.tsx`

### 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​

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

    <AlertDialogPortal /* props */ />

## AlertDialogTitle​

Title heading for the alert dialog

Source: `packages/appkit-ui/src/react/ui/alert-dialog.tsx`

### Props​

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

### Usage​

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

    <AlertDialogTitle /* props */ />

## AlertDialogTrigger​

Button that triggers the alert dialog to open

Source: `packages/appkit-ui/src/react/ui/alert-dialog.tsx`

### Props​

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

### Usage​

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

    <AlertDialogTrigger /* props */ />