Dialog

A highly tactile system dialog card. Mounts modal alert promoters featuring progressive dark overlays, Apple-spec blur backdrops, bold prompt headers, and elastic button layouts.

Preview

Svelte Composition Code

<script lang="ts">
	import * as Dialog from "$lib/components/ui/dialog";
	import { Button } from "$lib/components/ui/button";
</script>

<Dialog.Root>
	<Dialog.Trigger>
		<Button>Trigger System Prompts</Button>
	</Dialog.Trigger>
	<Dialog.Content class="max-w-xs">
		<Dialog.Header>
			<Dialog.Title>Allow Notifications?</Dialog.Title>
			<Dialog.Description>Notifications may include alerts, sounds and icon badges.</Dialog.Description>
		</Dialog.Header>
		<Dialog.Footer class="flex flex-row gap-2">
			<Dialog.Close>
				{#snippet child({ props })}
					<Button variant="bordered" class="flex-1" {...props}>Don't Allow</Button>
				{/snippet}
			</Dialog.Close>
			<Dialog.Close>
				{#snippet child({ props })}
					<Button variant="prominent" class="flex-1" {...props}>Allow</Button>
				{/snippet}
			</Dialog.Close>
		</Dialog.Footer>
	</Dialog.Content>
</Dialog.Root>

API & Props Reference

Dialog.Root

Coordinates dialog modal visibility, aria focus controls, and screen-blur bounds.

Dialog.Trigger

Clickable button or anchor mapping standard trigger bounds.

Dialog.Content

The floating glass prompt box styled with fade-in and scale-in Svelte animations.