---
title: Alert Dialog
description: A dialog that requires user response to proceed.

links:
  doc: https://base-ui.com/react/components/alert-dialog#api-reference
---

<ComponentPreview name="p-alert-dialog-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>

<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/alert-dialog
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @base-ui/react
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="alert-dialog" title="components/ui/alert-dialog.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPopup,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
```

```tsx
<AlertDialog>
  <AlertDialogTrigger>Delete Account</AlertDialogTrigger>
  <AlertDialogPopup>
    <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>
      <AlertDialogClose>Cancel</AlertDialogClose>
      <AlertDialogClose>Delete Account</AlertDialogClose>
    </AlertDialogFooter>
  </AlertDialogPopup>
</AlertDialog>
```

## API Reference

### AlertDialog

Root component. Alias for `AlertDialog.Root` from Base UI.

### AlertDialogTrigger

Trigger button that opens the alert dialog. Alias for `AlertDialog.Trigger` from Base UI.

### AlertDialogPopup

Popup container that displays the alert dialog content. Also exported as `AlertDialogContent`.

| Prop                  | Type                         | Default | Description                                      |
| --------------------- | ---------------------------- | ------- | ------------------------------------------------ |
| `bottomStickOnMobile` | `boolean`                    | `true`  | When true, sticks to the bottom of the screen on mobile devices |
| `portalProps`         | `AlertDialog.Portal.Props`   | -       | Props forwarded to the internal portal (`keepMounted`, `container`, etc.); see Base UI Alert Dialog portal API |

### AlertDialogHeader

Container for the alert dialog title and description.

### AlertDialogFooter

Footer section for action buttons.

Unlike [Dialog](/docs/components/dialog), alert dialog has no `AlertDialogPanel`. Put title and description in `AlertDialogHeader`, actions in `AlertDialogFooter`, and use a plain element with `className` if you need extra body content between them.

| Prop        | Type                     | Default     | Description                                      |
| ----------- | ------------------------ | ----------- | ------------------------------------------------ |
| `variant`   | `"default" \| "bare"`    | `"default"` | Controls the footer styling. `default` includes border and background, `bare` removes them |

**Example:**

```tsx
// Default variant (with border and background)
<AlertDialogFooter>
  <AlertDialogClose>Cancel</AlertDialogClose>
  <AlertDialogClose>Delete</AlertDialogClose>
</AlertDialogFooter>

// Bare variant (no border or background)
<AlertDialogFooter variant="bare">
  <AlertDialogClose>Cancel</AlertDialogClose>
  <AlertDialogClose>Delete</AlertDialogClose>
</AlertDialogFooter>
```

### AlertDialogTitle

Title component. Alias for `AlertDialog.Title` from Base UI.

### AlertDialogDescription

Description component. Alias for `AlertDialog.Description` from Base UI.

### AlertDialogClose

Close button component. Alias for `AlertDialog.Close` from Base UI.

### AlertDialogPortal

Portal component for rendering outside the DOM hierarchy. Alias for `AlertDialog.Portal` from Base UI.

### AlertDialogBackdrop

Backdrop/overlay component. Also exported as `AlertDialogOverlay`. Alias for `AlertDialog.Backdrop` from Base UI.

### AlertDialogViewport

Viewport component for positioning. Alias for `AlertDialog.Viewport` from Base UI.

## Examples

### Alert Dialog with Bare Footer

<ComponentPreview name="p-alert-dialog-2" />

### Close Confirmation

<ComponentPreview name="p-dialog-4" />