---
title: "AlertDialog"
description: "Blocking alert dialog with action + cancel buttons."
section: "Libraries"
group: "UI components"
order: 511
---

## Usage

```tsx
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@aeontel/ui";

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete workspace</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete this workspace?</AlertDialogTitle>
      <AlertDialogDescription>
        This removes every agent, run, file, and event. Cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>;
```

## Exports

### `AlertDialog`

Blocking alert dialog root.

```ts
AlertDialog(props: AlertDialogPrimitive.Root.Props): JSX.Element
```

### `AlertDialogTrigger`

Element that opens the alert dialog.

```ts
AlertDialogTrigger(props: AlertDialogPrimitive.Trigger.Props): JSX.Element
```

### `AlertDialogContent`

Alert dialog surface.

```ts
AlertDialogContent(props: AlertDialogPrimitive.Popup.Props & { size?: "default" | "sm"; }): JSX.Element
```

**Props**

| Prop    | Type                             | Default     | Description |
| ------- | -------------------------------- | ----------- | ----------- |
| `size?` | `"default" \| "sm" \| undefined` | `"default"` |             |

### `AlertDialogHeader`

Alert dialog header.

```ts
AlertDialogHeader(props: React.ComponentProps<"div">): JSX.Element
```

### `AlertDialogTitle`

Alert dialog title text.

```ts
AlertDialogTitle(props: React.ComponentProps<typeof AlertDialogPrimitive.Title>): JSX.Element
```

### `AlertDialogDescription`

Alert dialog description text.

```ts
AlertDialogDescription(props: React.ComponentProps<typeof AlertDialogPrimitive.Description>): JSX.Element
```

### `AlertDialogFooter`

Alert dialog footer with action + cancel buttons.

```ts
AlertDialogFooter(props: React.ComponentProps<"div">): JSX.Element
```

### `AlertDialogAction`

Primary action button (e.g. Confirm).

```ts
AlertDialogAction(props: React.ComponentProps<typeof Button>): JSX.Element
```

**Props**

| Prop       | Type                                                                                                      | Default | Description |
| ---------- | --------------------------------------------------------------------------------------------------------- | ------- | ----------- |
| `variant?` | `"link" \| "default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| null \| undefined`        | —       |             |
| `size?`    | `"default" \| "sm" \| "lg" \| "xs" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null \| undefined` | —       |             |

### `AlertDialogCancel`

Cancel button that dismisses the alert dialog.

```ts
AlertDialogCancel(props: AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): JSX.Element
```

**Props**

| Prop       | Type                                                                                                      | Default     | Description |
| ---------- | --------------------------------------------------------------------------------------------------------- | ----------- | ----------- |
| `variant?` | `"link" \| "default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| null \| undefined`        | `"outline"` |             |
| `size?`    | `"default" \| "sm" \| "lg" \| "xs" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null \| undefined` | `"default"` |             |