---
title: Alert Dialog
description: A modal dialog that interrupts the user with important content and expects a response.
---

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/alertdialog"
	"github.com/axadrn/shadcn-templ/v2/components/button"
)

templ AlertDialogDemo() {
	@alertdialog.AlertDialog() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: alertdialog.Trigger(ctx),
		}) {
			Show Dialog
		}
		@alertdialog.Content() {
			@alertdialog.Header() {
				@alertdialog.Title() {
					Are you absolutely sure?
				}
				@alertdialog.Description() {
					This action cannot be undone. This will permanently delete your account from our servers.
				}
			}
			@alertdialog.Footer() {
				@alertdialog.Cancel() {
					Cancel
				}
				@alertdialog.Action() {
					Continue
				}
			}
		}
	}
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add alert-dialog
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

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

<ComponentSource name="alert-dialog" title="components/alertdialog/alertdialog.templ" />

The alert dialog reuses the dialog component and its script. Copy the `dialog` component as well, including `dialog.js`.

Component scripts are loaded through the shared script bundle, see [JavaScript](/docs/installation#javascript).

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

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/alertdialog"
```

```templ showLineNumbers
@alertdialog.AlertDialog() {
	@button.Button(button.Props{Attributes: alertdialog.Trigger(ctx)}) {
		Show Dialog
	}
	@alertdialog.Content() {
		@alertdialog.Header() {
			@alertdialog.Title() {
				Are you absolutely sure?
			}
			@alertdialog.Description() {
				This action cannot be undone. This will permanently delete your account
				from our servers.
			}
		}
		@alertdialog.Footer() {
			@alertdialog.Cancel() {
				Cancel
			}
			@alertdialog.Action() {
				Continue
			}
		}
	}
}
```

## Composition

Use the following composition to build an `AlertDialog`:

```text
alertdialog.AlertDialog
├── alertdialog.Trigger
└── alertdialog.Content
    ├── alertdialog.Header
    │   ├── alertdialog.Media
    │   ├── alertdialog.Title
    │   └── alertdialog.Description
    └── alertdialog.Footer
        ├── alertdialog.Cancel
        └── alertdialog.Action
```

## Basic

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

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/alertdialog"
	"github.com/axadrn/shadcn-templ/v2/components/button"
)

templ AlertDialogBasic() {
	@alertdialog.AlertDialog() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: alertdialog.Trigger(ctx),
		}) {
			Show Dialog
		}
		@alertdialog.Content() {
			@alertdialog.Header() {
				@alertdialog.Title() {
					Are you absolutely sure?
				}
				@alertdialog.Description() {
					This action cannot be undone. This will permanently delete your account and remove your data from our servers.
				}
			}
			@alertdialog.Footer() {
				@alertdialog.Cancel() {
					Cancel
				}
				@alertdialog.Action() {
					Continue
				}
			}
		}
	}
}
```

## Small

Use the `Size` prop to make the alert dialog smaller.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/alertdialog"
	"github.com/axadrn/shadcn-templ/v2/components/button"
)

templ AlertDialogSmall() {
	@alertdialog.AlertDialog() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: alertdialog.Trigger(ctx),
		}) {
			Show Dialog
		}
		@alertdialog.Content(alertdialog.ContentProps{Size: alertdialog.SizeSm}) {
			@alertdialog.Header() {
				@alertdialog.Title() {
					Allow accessory to connect?
				}
				@alertdialog.Description() {
					Do you want to allow the USB accessory to connect to this device?
				}
			}
			@alertdialog.Footer() {
				@alertdialog.Cancel() {
					Don't allow
				}
				@alertdialog.Action() {
					Allow
				}
			}
		}
	}
}
```

## Media

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

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/alertdialog"
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ AlertDialogWithMedia() {
	@alertdialog.AlertDialog() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: alertdialog.Trigger(ctx),
		}) {
			Share Project
		}
		@alertdialog.Content() {
			@alertdialog.Header() {
				@alertdialog.Media() {
					@icon.CircleFadingPlus()
				}
				@alertdialog.Title() {
					Share this project?
				}
				@alertdialog.Description() {
					Anyone with the link will be able to view and edit this project.
				}
			}
			@alertdialog.Footer() {
				@alertdialog.Cancel() {
					Cancel
				}
				@alertdialog.Action() {
					Share
				}
			}
		}
	}
}
```

## Small with Media

Use the `Size` prop to make the alert dialog smaller and the `alertdialog.Media` component to add a media element such as an icon or image to the alert dialog.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/alertdialog"
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ AlertDialogSmallWithMedia() {
	@alertdialog.AlertDialog() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: alertdialog.Trigger(ctx),
		}) {
			Show Dialog
		}
		@alertdialog.Content(alertdialog.ContentProps{Size: alertdialog.SizeSm}) {
			@alertdialog.Header() {
				@alertdialog.Media() {
					@icon.Bluetooth()
				}
				@alertdialog.Title() {
					Allow accessory to connect?
				}
				@alertdialog.Description() {
					Do you want to allow the USB accessory to connect to this device?
				}
			}
			@alertdialog.Footer() {
				@alertdialog.Cancel() {
					Don't allow
				}
				@alertdialog.Action() {
					Allow
				}
			}
		}
	}
}
```

## Destructive

Use the `alertdialog.Action` component to add a destructive action button to the alert dialog.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/alertdialog"
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ AlertDialogDestructive() {
	@alertdialog.AlertDialog() {
		@button.Button(button.Props{
			Variant:    button.VariantDestructive,
			Attributes: alertdialog.Trigger(ctx),
		}) {
			Delete Chat
		}
		@alertdialog.Content(alertdialog.ContentProps{Size: alertdialog.SizeSm}) {
			@alertdialog.Header() {
				@alertdialog.Media(alertdialog.MediaProps{Class: "bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive"}) {
					@icon.Trash2()
				}
				@alertdialog.Title() {
					Delete chat?
				}
				@alertdialog.Description() {
					This will permanently delete this chat conversation. View <a href="#">Settings</a> delete any memories saved during this chat.
				}
			}
			@alertdialog.Footer() {
				@alertdialog.Cancel(alertdialog.CancelProps{Variant: button.VariantOutline}) {
					Cancel
				}
				@alertdialog.Action(alertdialog.ActionProps{Variant: button.VariantDestructive}) {
					Delete
				}
			}
		}
	}
}
```

## API Reference

### AlertDialog

The `AlertDialog` component is the root that links trigger, content and cancel via context. Unlike the dialog, it never closes on a click outside, only `Esc` and its buttons close it.

| Prop   | Type   | Default |
| ------ | ------ | ------- |
| `Open` | `bool` | `false` |

### Trigger

`alertdialog.Trigger(ctx)` returns the attributes that turn any element into the trigger, usually spread onto a Button. Use `alertdialog.TriggerFor(id)` to target an alert dialog outside the current root.

| Prop  | Type              | Default |
| ----- | ----------------- | ------- |
| `ctx` | `context.Context` | -       |

### Content

The `alertdialog.Content` component is the alert dialog window.

| Prop    | Type                | Default     |
| ------- | ------------------- | ----------- |
| `Size`  | `"default" \| "sm"` | `"default"` |
| `Class` | `string`            | -           |

### Header

The `alertdialog.Header` component holds the media, title and description.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### Media

The `alertdialog.Media` component holds a media element such as an icon or image.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### Title

The `alertdialog.Title` component is the accessible alert dialog title.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### Description

The `alertdialog.Description` component is the accessible alert dialog description.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### Footer

The `alertdialog.Footer` component holds the actions at the bottom of the alert dialog.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### Action

The `alertdialog.Action` component is the confirm button. Like shadcn's `AlertDialogAction` it is a plain button and does not close the alert dialog by itself, spread `alertdialog.Close(ctx)` into `Attributes` or submit a form to wire the confirm behavior.

| Prop      | Type             | Default     |
| --------- | ---------------- | ----------- |
| `Variant` | `button.Variant` | `"default"` |
| `Size`    | `button.Size`    | `"default"` |
| `Class`   | `string`         | -           |

### Cancel

The `alertdialog.Cancel` component is the button that closes the alert dialog.

| Prop      | Type             | Default     |
| --------- | ---------------- | ----------- |
| `Variant` | `button.Variant` | `"outline"` |
| `Size`    | `button.Size`    | `"default"` |
| `Class`   | `string`         | -           |

### Close

`alertdialog.Close(ctx)` returns the attributes that make any element close the alert dialog. Use `alertdialog.CloseFor(id)` to target an alert dialog outside the current root.

| Prop  | Type              | Default |
| ----- | ----------------- | ------- |
| `ctx` | `context.Context` | -       |