AlertDialog

Preview

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
	{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}

Installation

pnpm add fancy-ui-svelte

import { AlertDialog } from 'fancy-ui-svelte'

Usage

svelte

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

<AlertDialog />

Examples

Basic Usage

A destructive delete confirmation with a trigger.

svelte

<script lang="ts">
	import { AlertDialog } from "$lib/fancy-ui/alert-dialog";
	import { Button } from "$lib/fancy-ui/button";

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

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

<AlertDialog
	{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 "$lib/fancy-ui/alert-dialog";
	import { Button } from "$lib/fancy-ui/button";

	// 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
	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 "$lib/fancy-ui/alert-dialog";
	import { Button } from "$lib/fancy-ui/button";
</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
	{trigger}
	title="Sign out of all devices?"
	description="Every other session, on every device, ends immediately."
	confirmLabel="Sign out"
	cancelLabel="Stay signed in"
/>

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