# Alert Dialog

A dialog that requires user response to proceed.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import {
	AlertDialog,
	AlertDialogAction,
	AlertDialogCancel,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogPopup,
	AlertDialogTitle,
	AlertDialogTrigger,
} from "coss-svelte";
</script>

<AlertDialog>
	<AlertDialogTrigger class="cn-button-destructive-outline">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>
			<AlertDialogCancel>Cancel</AlertDialogCancel>
			<AlertDialogAction>Delete Account</AlertDialogAction>
		</AlertDialogFooter>
	</AlertDialogPopup>
</AlertDialog>

```

## Anatomy

- `AlertDialog`
- `AlertDialogAction`
- `AlertDialogCancel`
- `AlertDialogDescription`
- `AlertDialogFooter`
- `AlertDialogHeader`
- `AlertDialogPopup`
- `AlertDialogTitle`
- `AlertDialogTrigger`

## API Reference

### AlertDialog

A dialog that requires user response to proceed.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `bind:open` | `boolean` | `false` | Open state for the popup or disclosure. Bind with `bind:open`. |
| `trigger` | `string` | `"Open alert dialog"` | Fallback trigger text rendered when custom children are not provided. |
| `title` | `string` | `""` | Title text rendered by the component's built-in fallback layout. |
| `description` | `string` | `""` | Supporting text rendered by the component's built-in fallback layout. |

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Bits UI AlertDialog.Root](https://bits-ui.com/docs/components/alert-dialog#root).

### AlertDialogAction

Renders the primary action for the parent component.

**Composition and refs**

- `children: Snippet<[]>`
- `child: Snippet<[{ props: Record<string, unknown> }]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI AlertDialog.Action](https://bits-ui.com/docs/components/alert-dialog#action).

### AlertDialogCancel

Renders a cancellation action for the parent component.

**Composition and refs**

- `children: Snippet<[]>`
- `child: Snippet<[{ props: Record<string, unknown> }]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI AlertDialog.Cancel](https://bits-ui.com/docs/components/alert-dialog#cancel).

### AlertDialogDescription

Provides supporting copy for the parent component.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI AlertDialog.Description](https://bits-ui.com/docs/components/alert-dialog#description).

### AlertDialogFooter

Groups footer content and actions for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <div> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### AlertDialogHeader

Groups heading content for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <div> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### AlertDialogPopup

Renders the floating or modal surface for the parent component.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `portalProps` | `{ disabled?: boolean; to?: PortalTarget }` | `{}` | Configures the exact Bits Portal target (`to`) or renders inline when `disabled`. |

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI AlertDialog.Content](https://bits-ui.com/docs/components/alert-dialog#content).

### AlertDialogTitle

Names the parent surface or section.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI AlertDialog.Title](https://bits-ui.com/docs/components/alert-dialog#title).

### AlertDialogTrigger

Renders the control that opens, closes, or selects related content.

**Composition and refs**

- `children: Snippet<[]>`
- `child: Snippet<[{ props: Record<string, unknown> }]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI AlertDialog.Trigger](https://bits-ui.com/docs/components/alert-dialog#trigger).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | bits |
| Category | Overlays & Popups |
| Particles | 2 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/alert-dialog.json` for the complete local file and dependency closure.
- Alert Dialog is stable in the current source catalog.