Alert Dialog

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Prop reference

Auto-generated from the component source

AlertDialog

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof AlertDialogPrimitive.Root>

AlertDialogAction

className

React.ComponentProps<typeof AlertDialogPrimitive.Action>

AlertDialogCancel

className

React.ComponentProps<typeof AlertDialogPrimitive.Cancel>

AlertDialogContent

className

React.ComponentProps<typeof AlertDialogPrimitive.Content>

AlertDialogDescription

className

React.ComponentProps<typeof AlertDialogPrimitive.Description>

AlertDialogFooter

className

React.ComponentProps<"div">

AlertDialogHeader

className

React.ComponentProps<"div">

AlertDialogOverlay

className

React.ComponentProps<typeof AlertDialogPrimitive.Overlay>

AlertDialogPortal

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof AlertDialogPrimitive.Portal>

AlertDialogTitle

className

React.ComponentProps<typeof AlertDialogPrimitive.Title>

AlertDialogTrigger

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof AlertDialogPrimitive.Trigger>

Code

// owner: Sona
"use client";

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

export default function AlertDialogExample() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="destructive">Delete project</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete project?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone and will permanently remove the project
            and all associated data.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction className="bg-destructive text-white hover:bg-destructive/90">
            Confirm
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Alert Dialog

Component preview

On this page

Command Palette