8.0k
New

Alert Dialog

Previous Next

A modal dialog that interrupts the user with important content and expects a response.

Docs API Reference

Epicenter

Local-first, open source apps

Special Sponsor 
<script lang="ts">
	import * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
	import { buttonVariants } from "$lib/components/ui/button/index.js";
</script>
 
<AlertDialog.Root>
	<AlertDialog.Trigger class={buttonVariants({ variant: "outline" })}>
		Show Dialog
	</AlertDialog.Trigger>
	<AlertDialog.Content>
		<AlertDialog.Header>
			<AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
			<AlertDialog.Description>
				This action cannot be undone. This will permanently delete your account from our servers.
			</AlertDialog.Description>
		</AlertDialog.Header>
		<AlertDialog.Footer>
			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
			<AlertDialog.Action>Continue</AlertDialog.Action>
		</AlertDialog.Footer>
	</AlertDialog.Content>
</AlertDialog.Root>

Installation 

pnpm dlx shadcn-svelte@latest add alert-dialog

Usage 

<script lang="ts">
  import * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
  import { buttonVariants } from "$lib/components/ui/button/index.js";
</script>
<AlertDialog.Root>
  <AlertDialog.Trigger class={buttonVariants({ variant: "outline" })}>
    Show Dialog
  </AlertDialog.Trigger>
  <AlertDialog.Content>
    <AlertDialog.Header>
      <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
      <AlertDialog.Description>
        This action cannot be undone. This will permanently delete your account
        from our servers.
      </AlertDialog.Description>
    </AlertDialog.Header>
    <AlertDialog.Footer>
      <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
      <AlertDialog.Action>Continue</AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

Basic

A basic alert dialog with a title, description, and cancel and continue buttons.

<script lang="ts">
	import * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
	import { buttonVariants } from "$lib/components/ui/button/index.js";
</script>
 
<AlertDialog.Root>
	<AlertDialog.Trigger class={buttonVariants({ variant: "outline" })}>
		Show Dialog
	</AlertDialog.Trigger>
	<AlertDialog.Content>
		<AlertDialog.Header>
			<AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
			<AlertDialog.Description>
				This action cannot be undone. This will permanently delete your account and remove your data
				from our servers.
			</AlertDialog.Description>
		</AlertDialog.Header>
		<AlertDialog.Footer>
			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
			<AlertDialog.Action>Continue</AlertDialog.Action>
		</AlertDialog.Footer>
	</AlertDialog.Content>
</AlertDialog.Root>

Small

Use the size="sm" prop to make the alert dialog smaller.

<script lang="ts">
	import * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
	import { buttonVariants } from "$lib/components/ui/button/index.js";
</script>
 
<AlertDialog.Root>
	<AlertDialog.Trigger class={buttonVariants({ variant: "outline" })}
		>Show Dialog</AlertDialog.Trigger
	>
	<AlertDialog.Content size="sm">
		<AlertDialog.Header>
			<AlertDialog.Title>Allow accessory to connect?</AlertDialog.Title>
			<AlertDialog.Description>
				Do you want to allow the USB accessory to connect to this device?
			</AlertDialog.Description>
		</AlertDialog.Header>
		<AlertDialog.Footer>
			<AlertDialog.Cancel>Don't allow</AlertDialog.Cancel>
			<AlertDialog.Action>Allow</AlertDialog.Action>
		</AlertDialog.Footer>
	</AlertDialog.Content>
</AlertDialog.Root>

Media

Use the AlertDialog.Media component to add a media element such as an icon or image to the alert dialog.

<script lang="ts">
	import CircleFadingPlusIcon from "@lucide/svelte/icons/circle-fading-plus";
	import * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
	import { buttonVariants } from "$lib/components/ui/button/index.js";
</script>
 
<AlertDialog.Root>
	<AlertDialog.Trigger class={buttonVariants({ variant: "outline" })}
		>Share Project</AlertDialog.Trigger
	>
	<AlertDialog.Content>
		<AlertDialog.Header>
			<AlertDialog.Media>
				<CircleFadingPlusIcon />
			</AlertDialog.Media>
			<AlertDialog.Title>Share this project?</AlertDialog.Title>
			<AlertDialog.Description>
				Anyone with the link will be able to view and edit this project.
			</AlertDialog.Description>
		</AlertDialog.Header>
		<AlertDialog.Footer>
			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
			<AlertDialog.Action>Share</AlertDialog.Action>
		</AlertDialog.Footer>
	</AlertDialog.Content>
</AlertDialog.Root>

Small with Media

Use the size="sm" prop to make the alert dialog smaller and the AlertDialog.Media component to add a media element such as an icon or image to the alert dialog.

<script lang="ts">
	import BluetoothIcon from "@lucide/svelte/icons/bluetooth";
	import * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
	import { buttonVariants } from "$lib/components/ui/button/index.js";
</script>
 
<AlertDialog.Root>
	<AlertDialog.Trigger class={buttonVariants({ variant: "outline" })}
		>Show Dialog</AlertDialog.Trigger
	>
	<AlertDialog.Content size="sm">
		<AlertDialog.Header>
			<AlertDialog.Media>
				<BluetoothIcon />
			</AlertDialog.Media>
			<AlertDialog.Title>Allow accessory to connect?</AlertDialog.Title>
			<AlertDialog.Description>
				Do you want to allow the USB accessory to connect to this device?
			</AlertDialog.Description>
		</AlertDialog.Header>
		<AlertDialog.Footer>
			<AlertDialog.Cancel>Don't allow</AlertDialog.Cancel>
			<AlertDialog.Action>Allow</AlertDialog.Action>
		</AlertDialog.Footer>
	</AlertDialog.Content>
</AlertDialog.Root>

Destructive

Use the AlertDialog.Action component to add a destructive action button to the alert dialog.

<script lang="ts">
	import Trash2Icon from "@lucide/svelte/icons/trash-2";
	import * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
	import { buttonVariants } from "$lib/components/ui/button/index.js";
</script>
 
<AlertDialog.Root>
	<AlertDialog.Trigger class={buttonVariants({ variant: "destructive" })}>
		Delete Chat
	</AlertDialog.Trigger>
	<AlertDialog.Content size="sm">
		<AlertDialog.Header>
			<AlertDialog.Media
				class="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive"
			>
				<Trash2Icon />
			</AlertDialog.Media>
			<AlertDialog.Title>Delete chat?</AlertDialog.Title>
			<AlertDialog.Description>
				This will permanently delete this chat conversation. View <a href="##">Settings</a> delete any
				memories saved during this chat.
			</AlertDialog.Description>
		</AlertDialog.Header>
		<AlertDialog.Footer>
			<AlertDialog.Cancel variant="outline">Cancel</AlertDialog.Cancel>
			<AlertDialog.Action variant="destructive">Delete</AlertDialog.Action>
		</AlertDialog.Footer>
	</AlertDialog.Content>
</AlertDialog.Root>