# AlertDialog

> A confirmation dialog for consequential, hard-to-undo actions — fixed confirm/cancel actions, never dismissed by an outside click.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Overlays
- Tags: alert, dialog, confirm, destructive, overlay, modal
- Dependencies: dialog, button
- Docs: https://fancy-ui.rama.app/docs/components/alert-dialog
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/alert-dialog

## Import

```svelte
<script lang="ts">
  import { AlertDialog } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { AlertDialog } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | `false` | Whether the alert dialog is open; bindable |
| `onOpenChange` | `(open: boolean) => void` | — | Fires whenever open changes — Confirm, Cancel, or Escape |
| `title` | `string` | — | The heading. Omitted entirely (not just visually) when not given |
| `description` | `string` | — | The warning copy under the title. Same omission rule as title |
| `confirmLabel` | `string` | `"Confirm"` | Label of the destructive action |
| `cancelLabel` | `string` | `"Cancel"` | Label of the safe action |
| `onConfirm` | `() => void` | — | Called when the destructive action is activated, before the surface closes |
| `onCancel` | `() => void` | — | Called when the safe action is activated, and also when Escape closes it |
| `initialFocus` | `HTMLElement \| null` | — | Element to focus once the surface opens; defaults to the Cancel button |
| `class` | `string` | — | Additional CSS classes for the panel |
| `ref` | `HTMLDivElement \| null` | `null` | Bindable reference to the panel element |
| `sound` | `boolean` | `false` | Plays open on the trigger, select on a confirmed action and close on Cancel or Escape, once the user has enabled sound |

## Snippets

| Snippet | Description |
| --- | --- |
| `trigger` | Optional trigger; renders in place and opens the surface on activation |

## Examples

### Basic Usage

A destructive delete confirmation with a trigger.

```svelte
<script lang="ts">
	import { AlertDialog } from "fancy-ui-svelte";
	import { Button } from "fancy-ui-svelte";

	let status = $state("");
</script>

{#snippet trigger()}
	<Button variant="destructive">Delete project</Button>
{/snippet}

<AlertDialog
	sound
	{trigger}
	title="Delete this project?"
	description="This action is irreversible. All data will be lost."
	confirmLabel="Delete"
	onConfirm={() => (status = "Project deleted.")}
	onCancel={() => (status = "Cancelled.")}
/>

{#if status}
	<p class="text-muted-foreground mt-2 text-[12px]">{status}</p>
{/if}
```

### Controlled Open

Non-bound open plus onOpenChange, triggered from a list row.

```svelte
<script lang="ts">
	import { AlertDialog } from "fancy-ui-svelte";
	import { Button } from "fancy-ui-svelte";

	// Same non-bound + onOpenChange pattern Dialog supports — useful when the
	// confirmation is triggered by something other than AlertDialog's own
	// `trigger`, e.g. a toolbar action or a keyboard shortcut.
	let isOpen = $state(false);
	let members = $state(["Alice", "Bob", "Priya"]);
</script>

<ul class="flex flex-col gap-1 text-[13px]">
	{#each members as member (member)}
		<li class="flex items-center justify-between gap-3">
			{member}
			<Button variant="ghost" size="sm" onclick={() => (isOpen = true)}>Remove</Button>
		</li>
	{/each}
</ul>

<AlertDialog
	sound
	open={isOpen}
	onOpenChange={(next) => (isOpen = next)}
	title="Remove member?"
	description="They will lose access to this workspace immediately."
	confirmLabel="Remove"
	onConfirm={() => (members = members.slice(0, -1))}
/>
```

### Custom Labels

A non-delete use case — signing out of every device.

```svelte
<script lang="ts">
	import { AlertDialog } from "fancy-ui-svelte";
	import { Button } from "fancy-ui-svelte";
</script>

<!--
	Not every AlertDialog guards a delete — any consequential, hard-to-undo
	action fits: signing out everywhere ends every other session immediately,
	with no confirmation-proof undo once it runs.
-->
{#snippet trigger()}
	<Button variant="outline">Sign out everywhere</Button>
{/snippet}

<AlertDialog
	sound
	{trigger}
	title="Sign out of all devices?"
	description="Every other session, on every device, ends immediately."
	confirmLabel="Sign out"
	cancelLabel="Stay signed in"
/>
```