---
type: doc
title: Alert Dialog
description: A modal dialog for important confirmations that expects a response.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro title="src/components/examples/alert-dialog/alert-dialog-demo.astro"
---
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
---

<AlertDialog>
  <AlertDialogTrigger variant="outline">Show Dialog</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account
        from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

## Installation

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

## Usage

```ts
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
```

```astro
<AlertDialog>
  <AlertDialogTrigger variant="outline">Show Dialog</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>
```

`AlertDialogTrigger`, `AlertDialogCancel` and `AlertDialogAction` are `Button`s
and take its props, such as `variant`. `AlertDialogCancel` closes the dialog.
`AlertDialogAction` does not: run the action, then close the dialog with the
`alert-dialog:set` event.

```astro
<AlertDialog id="account-deletion-dialog">
  <AlertDialogTrigger>Delete account</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogTitle>Delete this account?</AlertDialogTitle>
    <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
    <AlertDialogAction id="confirm-account-deletion">
      Delete account
    </AlertDialogAction>
  </AlertDialogContent>
</AlertDialog>

<script>
  const dialog = document.getElementById("account-deletion-dialog")
  const action = document.getElementById("confirm-account-deletion")

  action?.addEventListener("click", () => {
    // Run the confirmed action here, then close after it succeeds.
    dialog?.dispatchEvent(
      new CustomEvent("alert-dialog:set", {
        detail: { open: false },
      })
    )
  })
</script>
```

## Composition

```text
AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
    ├── AlertDialogHeader
    │   ├── AlertDialogMedia
    │   ├── AlertDialogTitle
    │   └── AlertDialogDescription
    └── AlertDialogFooter
        ├── AlertDialogCancel
        └── AlertDialogAction
```

Keep `AlertDialogTitle` and `AlertDialogDescription` inside
`AlertDialogContent` so screen readers announce the dialog context.

## Basic

A basic alert dialog with a title, description, and cancel and continue
buttons.

```astro title="src/components/examples/alert-dialog/alert-dialog-basic.astro"
---
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
---

<AlertDialog>
  <AlertDialogTrigger variant="outline">Show Dialog</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>
```

## Small

Use the `size="sm"` prop to make the alert dialog smaller.

```astro title="src/components/examples/alert-dialog/alert-dialog-small.astro"
---
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
---

<AlertDialog>
  <AlertDialogTrigger variant="outline">Show Dialog</AlertDialogTrigger>
  <AlertDialogContent size="sm">
    <AlertDialogHeader>
      <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
      <AlertDialogDescription>
        Do you want to allow the USB accessory to connect to this device?
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Don't allow</AlertDialogCancel>
      <AlertDialogAction>Allow</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

## Media

Use the `AlertDialogMedia` component to add a media element such as an icon or
image to the alert dialog.

```astro title="src/components/examples/alert-dialog/alert-dialog-media.astro"
---
import CircleFadingPlusIcon from "@lucide/astro/icons/circle-fading-plus"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
---

<AlertDialog>
  <AlertDialogTrigger variant="outline">Share Project</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogMedia>
        <CircleFadingPlusIcon />
      </AlertDialogMedia>
      <AlertDialogTitle>Share this project?</AlertDialogTitle>
      <AlertDialogDescription>
        Anyone with the link will be able to view and edit this project.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Share</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

## Small with Media

Use `size="sm"` and `AlertDialogMedia` together.

```astro title="src/components/examples/alert-dialog/alert-dialog-small-media.astro"
---
import BluetoothIcon from "@lucide/astro/icons/bluetooth"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
---

<AlertDialog>
  <AlertDialogTrigger variant="outline">Show Dialog</AlertDialogTrigger>
  <AlertDialogContent size="sm">
    <AlertDialogHeader>
      <AlertDialogMedia>
        <BluetoothIcon />
      </AlertDialogMedia>
      <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
      <AlertDialogDescription>
        Do you want to allow the USB accessory to connect to this device?
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Don't allow</AlertDialogCancel>
      <AlertDialogAction>Allow</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

## Destructive

Pass `variant="destructive"` to `AlertDialogAction` for a destructive action.

```astro title="src/components/examples/alert-dialog/alert-dialog-destructive.astro"
---
import Trash2Icon from "@lucide/astro/icons/trash"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
---

<AlertDialog>
  <AlertDialogTrigger variant="destructive">Delete Chat</AlertDialogTrigger>
  <AlertDialogContent size="sm">
    <AlertDialogHeader>
      <AlertDialogMedia class="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
        <Trash2Icon />
      </AlertDialogMedia>
      <AlertDialogTitle>Delete chat?</AlertDialogTitle>
      <AlertDialogDescription>
        This will permanently delete this chat conversation. View
        <a href="#">Settings</a> delete any memories saved during this chat.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel variant="outline">Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

## RTL

Pass `dir="rtl"` on `AlertDialogContent` as well: the content is portaled to
`document.body`.

```astro title="src/components/examples/alert-dialog/alert-dialog-rtl.astro"
---
import BluetoothIcon from "@lucide/astro/icons/bluetooth"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

const translations = {
  en: {
    dir: "ltr",
    values: {
      showDialog: "Show Dialog",
      showDialogSm: "Show Dialog (sm)",
      title: "Are you absolutely sure?",
      description:
        "This action cannot be undone. This will permanently delete your account from our servers.",
      cancel: "Cancel",
      continue: "Continue",
      smallTitle: "Allow accessory to connect?",
      smallDescription:
        "Do you want to allow the USB accessory to connect to this device?",
      dontAllow: "Don't allow",
      allow: "Allow",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      showDialog: "إظهار الحوار",
      showDialogSm: "إظهار الحوار (صغير)",
      title: "هل أنت متأكد تمامًا؟",
      description:
        "لا يمكن التراجع عن هذا الإجراء. سيؤدي هذا إلى حذف حسابك نهائيًا من خوادمنا.",
      cancel: "إلغاء",
      continue: "متابعة",
      smallTitle: "السماح للملحق بالاتصال؟",
      smallDescription: "هل تريد السماح لملحق USB بالاتصال بهذا الجهاز؟",
      dontAllow: "عدم السماح",
      allow: "السماح",
    },
  },
  he: {
    dir: "rtl",
    values: {
      showDialog: "הצג דיאלוג",
      showDialogSm: "הצג דיאלוג (קטן)",
      title: "האם אתה בטוח לחלוטין?",
      description:
        "פעולה זו לא ניתנת לביטול. זה ימחק לצמיתות את החשבון שלך מהשרתים שלנו.",
      cancel: "ביטול",
      continue: "המשך",
      smallTitle: "לאפשר להתקן להתחבר?",
      smallDescription: "האם אתה רוצה לאפשר להתקן USB להתחבר למכשיר זה?",
      dontAllow: "אל תאפשר",
      allow: "אפשר",
    },
  },
} as const

const language = "ar"
const { dir, values: t } = translations[language]
---

<div class="flex gap-4" dir={dir}>
  <AlertDialog>
    <AlertDialogTrigger variant="outline">{t.showDialog}</AlertDialogTrigger>
    <AlertDialogContent dir={dir} data-lang={language}>
      <AlertDialogHeader>
        <AlertDialogTitle>{t.title}</AlertDialogTitle>
        <AlertDialogDescription>{t.description}</AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>{t.cancel}</AlertDialogCancel>
        <AlertDialogAction>{t.continue}</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
  <AlertDialog>
    <AlertDialogTrigger variant="outline">{t.showDialogSm}</AlertDialogTrigger>
    <AlertDialogContent size="sm" dir={dir} data-lang={language}>
      <AlertDialogHeader>
        <AlertDialogMedia>
          <BluetoothIcon />
        </AlertDialogMedia>
        <AlertDialogTitle>{t.smallTitle}</AlertDialogTitle>
        <AlertDialogDescription>{t.smallDescription}</AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>{t.dontAllow}</AlertDialogCancel>
        <AlertDialogAction>{t.allow}</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</div>
```

## API Reference

Source: [`src/components/ui/alert-dialog`](https://github.com/fulldotdev/ui/tree/main/src/components/ui/alert-dialog)

Interactivity comes from [`@data-slot/alert-dialog`](https://github.com/bejamas/data-slot/blob/main/packages/alert-dialog/README.md).

### AlertDialog

| Prop                  | Type      | Default |
| --------------------- | --------- | ------- |
| `defaultOpen`         | `boolean` | `false` |
| `closeOnClickOutside` | `boolean` | `false` |
| `closeOnEscape`       | `boolean` | `true`  |
| `lockScroll`          | `boolean` | `true`  |

| Event                 | Detail              | Description                        |
| --------------------- | ------------------- | ---------------------------------- |
| `alert-dialog:change` | `{ open: boolean }` | Fired when the open state changes. |
| `alert-dialog:set`    | `{ open: boolean }` | Dispatch to set the open state.    |

### AlertDialogContent

| Prop   | Type                | Default     |
| ------ | ------------------- | ----------- |
| `size` | `"default" \| "sm"` | `"default"` |

## Install what this page shows

```bash
npx shadcn@latest add @fulldev/alert-dialog-examples
```