Alert Dialog

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

Basic

Small

With Media

Small With Media

Destructive

In Dialog

<script lang="ts">
  import { Example, ExampleWrapper } from '$registry/bases/base/components/example';
  import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogMedia,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from '$registry/bases/base/ui/alert-dialog';
  import { Button } from '$registry/bases/base/ui/button';
  import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
  } from '$registry/bases/base/ui/dialog';
  import { IconPlaceholder } from '$registry/bases/base/ui/icons';
</script>

{#snippet AlertDialogBasic()}
  <Example title="Basic" class="items-center">
    <AlertDialog>
      <AlertDialogTrigger>
        {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
        Default
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your account and remove your data from our
            servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  </Example>
{/snippet}

{#snippet AlertDialogSmall()}
  <Example title="Small" class="items-center">
    <AlertDialog>
      <AlertDialogTrigger>
        {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
        Small
      </AlertDialogTrigger>
      <AlertDialogContent size="sm">
        <AlertDialogHeader>
          <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
          <AlertDialogDescription>
            Do you want to allow the USB accessory to connect to this device?
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
          <AlertDialogAction>Allow</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  </Example>
{/snippet}

{#snippet AlertDialogWithMedia()}
  <Example title="With Media" class="items-center">
    <AlertDialog>
      <AlertDialogTrigger>
        {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
        Default (Media)
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogMedia>
            <IconPlaceholder
              lucide="BluetoothIcon"
              tabler="IconBluetooth"
              hugeicons="BluetoothIcon"
              phosphor="BluetoothIcon"
              remixicon="RiBluetoothLine"
            />
          </AlertDialogMedia>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This will permanently delete your account and remove your data from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  </Example>
{/snippet}

{#snippet AlertDialogSmallWithMedia()}
  <Example title="Small With Media" class="items-center">
    <AlertDialog>
      <AlertDialogTrigger>
        {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
        Small (Media)
      </AlertDialogTrigger>
      <AlertDialogContent size="sm">
        <AlertDialogHeader>
          <AlertDialogMedia>
            <IconPlaceholder
              lucide="BluetoothIcon"
              tabler="IconBluetooth"
              hugeicons="BluetoothIcon"
              phosphor="BluetoothIcon"
              remixicon="RiBluetoothLine"
            />
          </AlertDialogMedia>
          <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
          <AlertDialogDescription>
            Do you want to allow the USB accessory to connect to this device?
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
          <AlertDialogAction>Allow</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  </Example>
{/snippet}

{#snippet AlertDialogDestructive()}
  <Example title="Destructive" class="items-center">
    <AlertDialog>
      <AlertDialogTrigger>
        {#snippet render(props, _state, content)}<Button variant="destructive" {...props}>{@render content?.()}</Button>{/snippet}
        Delete Chat
      </AlertDialogTrigger>
      <AlertDialogContent size="sm">
        <AlertDialogHeader>
          <AlertDialogMedia class="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
            <IconPlaceholder
              lucide="Trash2Icon"
              tabler="IconTrash"
              hugeicons="Delete02Icon"
              phosphor="TrashIcon"
              remixicon="RiDeleteBinLine"
            />
          </AlertDialogMedia>
          <AlertDialogTitle>Delete chat?</AlertDialogTitle>
          <AlertDialogDescription>
            This will permanently delete this chat conversation. View
            <!-- svelte-ignore a11y_invalid_attribute -->
            <a href="#">Settings</a> delete any memories saved during this chat.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel variant="ghost">Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  </Example>
{/snippet}

{#snippet AlertDialogInDialog()}
  <Example title="In Dialog" class="items-center">
    <Dialog>
      <DialogTrigger>
        {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
        Open Dialog
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Alert Dialog Example</DialogTitle>
          <DialogDescription>Click the button below to open an alert dialog.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <AlertDialog>
            <AlertDialogTrigger>
              {#snippet render(props, _state, content)}<Button {...props}>{@render content?.()}</Button>{/snippet}
              Open Alert Dialog
            </AlertDialogTrigger>
            <AlertDialogContent size="sm">
              <AlertDialogHeader>
                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                <AlertDialogDescription>
                  This action cannot be undone. This will permanently delete your account and remove your data from our
                  servers.
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction>Continue</AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </Example>
{/snippet}

<ExampleWrapper>
  {@render AlertDialogBasic()}
  {@render AlertDialogSmall()}
  {@render AlertDialogWithMedia()}
  {@render AlertDialogSmallWithMedia()}
  {@render AlertDialogDestructive()}
  {@render AlertDialogInDialog()}
</ExampleWrapper>

Installation

Install the dependencies

pnpm add cn class-variance-authority github:sveltery/base

Copy the component

Copy the following files into src/lib/components/ui/alert-dialog.

It imports the button component, so copy its folder too.

src/lib/components/ui/alert-dialog/AlertDialogAction.svelte

<script lang="ts">
  import { cn } from 'cn';
  import { Button, type ButtonProps } from '../button/index.js';
  let { children, class: classProp, ...props }: ButtonProps = $props();
</script>
<Button data-slot="alert-dialog-action" {children} {...props} class={cn('', classProp)} />

src/lib/components/ui/alert-dialog/AlertDialogCancel.svelte

<script lang="ts">
  import type { ComponentProps, Snippet } from 'svelte';
  import type { HTMLAttributes } from 'svelte/elements';
  import { AlertDialog as Primitive } from '@sveltery/base/alert-dialog';
  import { cn } from 'cn';
  import { Button, type ButtonProps } from '../button/index.js';
  let { class: classProp, variant = 'outline', size = 'default', ...props }: ComponentProps<typeof Primitive.Close> & Pick<ButtonProps, 'variant' | 'size'> = $props();
</script>
{#snippet button(buttonProps: HTMLAttributes<HTMLElement>, _state: unknown, content: Snippet | undefined)}
  <Button {variant} {size} {...buttonProps}>{@render content?.()}</Button>
{/snippet}
<Primitive.Close data-slot="alert-dialog-cancel" class={cn('', classProp)} render={button} {...props} />

src/lib/components/ui/alert-dialog/AlertDialogContent.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { AlertDialog as Primitive } from '@sveltery/base/alert-dialog';
  import { cn } from 'cn';
  import AlertDialogPortal from './AlertDialogPortal.svelte';
  import AlertDialogOverlay from './AlertDialogOverlay.svelte';
  let { children, class: classProp, size = 'default', ...props }: ComponentProps<typeof Primitive.Popup> & { size?: 'default' | 'sm' } = $props();
</script>
<AlertDialogPortal>
  <AlertDialogOverlay />
  <Primitive.Popup data-slot="alert-dialog-content" data-size={size} {children} {...props} class={cn('data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none', classProp)} />
</AlertDialogPortal>

src/lib/components/ui/alert-dialog/AlertDialogDescription.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { AlertDialog as Primitive } from '@sveltery/base/alert-dialog';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: ComponentProps<typeof Primitive.Description> = $props();
</script>
<Primitive.Description data-slot="alert-dialog-description" {children} {...props} class={cn('text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3', classProp)} />

src/lib/components/ui/alert-dialog/AlertDialogFooter.svelte

<script lang="ts">
  import type { HTMLAttributes } from 'svelte/elements';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: HTMLAttributes<HTMLDivElement> = $props();
</script>
<div data-slot="alert-dialog-footer" {...props} class={cn('bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end', classProp)}>
  {@render children?.()}
</div>

src/lib/components/ui/alert-dialog/AlertDialogHeader.svelte

<script lang="ts">
  import type { HTMLAttributes } from 'svelte/elements';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: HTMLAttributes<HTMLDivElement> = $props();
</script>
<div data-slot="alert-dialog-header" {...props} class={cn('grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]', classProp)}>
  {@render children?.()}
</div>

src/lib/components/ui/alert-dialog/AlertDialogMedia.svelte

<script lang="ts">
  import type { HTMLAttributes } from 'svelte/elements';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: HTMLAttributes<HTMLDivElement> = $props();
</script>
<div data-slot="alert-dialog-media" {...props} class={cn("bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", classProp)}>
  {@render children?.()}
</div>

src/lib/components/ui/alert-dialog/AlertDialogOverlay.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { AlertDialog as Primitive } from '@sveltery/base/alert-dialog';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: ComponentProps<typeof Primitive.Backdrop> = $props();
</script>
<Primitive.Backdrop data-slot="alert-dialog-overlay" {children} {...props} class={cn('data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50', classProp)} />

src/lib/components/ui/alert-dialog/AlertDialogPortal.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { AlertDialog as Primitive } from '@sveltery/base/alert-dialog';
  let { children, ...props }: ComponentProps<typeof Primitive.Portal> = $props();
</script>
<Primitive.Portal data-slot="alert-dialog-portal" {...props}>
  {@render children?.()}
</Primitive.Portal>

src/lib/components/ui/alert-dialog/AlertDialogTitle.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { AlertDialog as Primitive } from '@sveltery/base/alert-dialog';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: ComponentProps<typeof Primitive.Title> = $props();
</script>
<Primitive.Title data-slot="alert-dialog-title" {children} {...props} class={cn('text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2', classProp)} />

src/lib/components/ui/alert-dialog/AlertDialogTrigger.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { AlertDialog as Primitive } from '@sveltery/base/alert-dialog';
  let { children, ...props }: ComponentProps<typeof Primitive.Trigger> = $props();
</script>
<Primitive.Trigger data-slot="alert-dialog-trigger" {children} {...props} />

src/lib/components/ui/alert-dialog/index.ts

import { AlertDialog as Primitive } from '@sveltery/base/alert-dialog';

export const AlertDialog = Primitive.Root as typeof Primitive.Root;
export { default as AlertDialogTrigger } from './AlertDialogTrigger.svelte';
export { default as AlertDialogPortal } from './AlertDialogPortal.svelte';
export { default as AlertDialogOverlay } from './AlertDialogOverlay.svelte';
export { default as AlertDialogContent } from './AlertDialogContent.svelte';
export { default as AlertDialogHeader } from './AlertDialogHeader.svelte';
export { default as AlertDialogFooter } from './AlertDialogFooter.svelte';
export { default as AlertDialogMedia } from './AlertDialogMedia.svelte';
export { default as AlertDialogTitle } from './AlertDialogTitle.svelte';
export { default as AlertDialogDescription } from './AlertDialogDescription.svelte';
export { default as AlertDialogAction } from './AlertDialogAction.svelte';
export { default as AlertDialogCancel } from './AlertDialogCancel.svelte';

Update the import paths

Change the imports to match your project setup.

Usage

<script lang="ts">
  import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from '$lib/components/ui/alert-dialog';
</script>

<AlertDialog>
  <AlertDialogTrigger>Show Dialog</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>This action cannot be undone. It permanently deletes your account.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

An alert dialog is always modal, and a press outside it does not close it. AlertDialogCancel and the Escape key close it. AlertDialogAction is a Button and leaves the dialog open, so that you can run the action first. Use bind:open to close it from your code:

<script lang="ts">
  let open = $state(false);
</script>

<AlertDialog bind:open>
  …
  <AlertDialogAction onclick={async () => { await deleteProject(); open = false; }}>Delete</AlertDialogAction>
</AlertDialog>

Size

size="sm" on AlertDialogContent makes a narrow dialog with the footer buttons side by side.

API reference

AlertDialog is styled on top of the Sveltery Base AlertDialog primitive, which owns its behavior, focus handling and accessibility. See the Base UI Alert Dialog documentation for the behavior it ports.