Components / Base

Alert Dialog

A modal dialog that interrupts the user with important content and expects a deliberate response. Unlike Dialog, it cannot be dismissed by clicking the backdrop or pressing Escape. Based on shadcn/ui Alert Dialog, built on Base UI with Instant Strata styling.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/alert-dialog/registry.json

Usage

tsx

import { Trash2Icon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

export function Example() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="outline" />}>
        Archive scheme
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogMedia>
            <Trash2Icon />
          </AlertDialogMedia>
          <AlertDialogTitle>Archive this scheme?</AlertDialogTitle>
          <AlertDialogDescription>
            Owners and managers lose access until it is restored. You can
            unarchive it at any time from settings.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Archive</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Composition

text

AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
    ├── AlertDialogHeader
    │   ├── AlertDialogMedia      (optional)
    │   ├── AlertDialogTitle
    │   └── AlertDialogDescription
    └── AlertDialogFooter
        ├── AlertDialogCancel
        └── AlertDialogAction

Examples

Default (Media)

The default style leads with a media block — an icon that frames the decision before the title and description.

Archive scheme

Destructive

Pair a destructive media block with a destructive action button for irreversible operations.

Delete lot

tsx

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="destructive" />}>
    Delete lot
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogMedia variant="destructive">
        <Trash2Icon />
      </AlertDialogMedia>
      <AlertDialogTitle>Delete this lot?</AlertDialogTitle>
      <AlertDialogDescription>
        This permanently removes the lot, its owners, and levy history. This
        action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Small

A compact panel with size="sm" for short, single-decision confirmations.

Sign out

tsx

<AlertDialogContent size="sm">
  <AlertDialogHeader>
    <AlertDialogMedia>
      <LogOutIcon />
    </AlertDialogMedia>
    <AlertDialogTitle>Sign out?</AlertDialogTitle>
    <AlertDialogDescription>
      You will need to sign in again to manage your schemes.
    </AlertDialogDescription>
  </AlertDialogHeader>
  <AlertDialogFooter>
    <AlertDialogCancel>Cancel</AlertDialogCancel>
    <AlertDialogAction>Sign out</AlertDialogAction>
  </AlertDialogFooter>
</AlertDialogContent>

Without media

Omit AlertDialogMedia for a plain, text-only confirmation.

Continue

tsx

<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>

Props

AlertDialogContent

Prop	Type	Default	Description
size	"default" \| "sm"	"default"	Controls the panel width. Use sm for short, single-decision confirmations.
className	string	-	Additional classes on the popup panel.

AlertDialogMedia

Prop	Type	Default	Description
variant	"default" \| "destructive"	"default"	Tints the icon block. Use destructive for irreversible actions.

AlertDialogAction

Prop	Type	Default	Description
variant	ButtonProps["variant"]	"default"	Forwarded to the underlying Button. Use destructive on AlertDialogAction to confirm dangerous actions.