Alert Dialog
A focused confirmation surface for important decisions.
The Alert Dialog Component
Basic Usage
Code Snippet
<script lang="ts"> import { AlertDialog, Button } from '$lib/components'; let open = $state(false); </script> <Button role="danger" variant="soft" onclick={() => (open = true)}>Delete project</Button> <AlertDialog bind:open={open} type="destructive" title="Delete project" description="This action removes the workspace and cannot be undone." confirmLabel="Delete" cancelLabel="Keep project" />Examples
Confirmation Prompt
Require an explicit prompt when the action is irreversible.