Alert Dialog

Blocking confirmation surface on bits-ui AlertDialog. Fade-and-zoom opens in 100ms, refuses to dismiss on overlay click — user must commit or cancel.

API Reference Component Source

Usage

alert-dialog.svelte

<script lang="ts">
	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';

	let { open = $bindable(false), ...restProps }: AlertDialogPrimitive.RootProps = $props();
</script>

<AlertDialogPrimitive.Root
	bind:open
	{...restProps}
	{...{ 'data-slot': 'alert-dialog' } as Record<string, unknown>}
/>

With media

alert-dialog-media.svelte

<script lang="ts">
	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';

	let { open = $bindable(false), ...restProps }: AlertDialogPrimitive.RootProps = $props();
</script>

<AlertDialogPrimitive.Root
	bind:open
	{...restProps}
	{...{ 'data-slot': 'alert-dialog' } as Record<string, unknown>}
/>

Compact size

alert-dialog-sm.svelte

<script lang="ts">
	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';

	let { open = $bindable(false), ...restProps }: AlertDialogPrimitive.RootProps = $props();
</script>

<AlertDialogPrimitive.Root
	bind:open
	{...restProps}
	{...{ 'data-slot': 'alert-dialog' } as Record<string, unknown>}
/>

AlertDialog.Root props

Inherits bits-ui AlertDialog.Root props via spread.

Prop	Type	Default	Description
	`boolean (bindable)`	`false`	Controls visibility. Two-way bindable.
	`(open: boolean) => void`	—	Fires when the open state changes for any reason.

AlertDialog.Content props

Type	Default	Description
`'default' \| 'sm'`	`'default'`	Max-width preset. Compact is useful for short confirmations.
`ComponentProps<AlertDialog.Portal>`	—	Forwarded to the internal portal.
`string`	—	Merged onto the content surface via tailwind-merge.