Alert Dialog

Use alert dialog for destructive or high-impact actions that need confirmation before continuing. Compose with Trigger, Content, Header, Title, Description, Footer, Cancel, and Action.

1<script lang="ts">
2	import * as AlertDialog from '~/components/alert-dialog';
3	import { buttonVariants } from '$lib/components/ui/button';
4</script>
5
6<AlertDialog.Root>
7	<AlertDialog.Trigger class={buttonVariants({ variant: 'outline' })}
8		>Show Dialog</AlertDialog.Trigger
9	>
10	<AlertDialog.Content>
11		<AlertDialog.Header>
12			<AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
13			<AlertDialog.Description>
14				This action cannot be undone. This will permanently delete your account and remove your data
15				from our servers.
16			</AlertDialog.Description>
17		</AlertDialog.Header>
18		<AlertDialog.Footer>
19			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
20			<AlertDialog.Action>Continue</AlertDialog.Action>
21		</AlertDialog.Footer>
22	</AlertDialog.Content>
23</AlertDialog.Root>