3

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response. Built on Base UI's alert dialog primitive.

Last updated August 8, 2026

CreditsModifiedPublished

Copied from shadcn/ui.

  • AlertDialogTrigger measures the ambient direction where it renders and passes it to the portaled popup
  • Fixes the classic RTL centering bug: the popup is anchored with start-1/2 (a logical position) but shifted back to center with -translate-x-1/2, a physical, LTR-only offset — in RTL this doubles the error instead of centering, so rtl:translate-x-1/2 flips the sign back. Only fires correctly now that dir is set explicitly on the popup instead of relying on document.documentElement

Overview

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
 
export function AlertDialogDemoExample() {
  return (
    <AlertDialog>
      <AlertDialogTrigger
        render={<Button variant="outline">Delete account</Button>}
      />
      <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>
  )
}

No footer

AlertDialogFooter is optional — for a single-action alert, AlertDialogCancel can sit directly in the content without the muted footer bar. It still has to be an actual action, though: Alert Dialog can't be dismissed by pressing Escape or clicking outside.

import { BadgeCheckIcon } from "lucide-react"
 
import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
 
export function AlertDialogNoFooterExample() {
  return (
    <AlertDialog>
      <AlertDialogTrigger
        render={<Button variant="outline">View receipt</Button>}
      />
      <AlertDialogContent className="pb-4">
        <AlertDialogHeader>
          <AlertDialogMedia>
            <BadgeCheckIcon />
          </AlertDialogMedia>
          <AlertDialogTitle>Payment successful</AlertDialogTitle>
          <AlertDialogDescription>
            Your subscription is active. A receipt was sent to your email.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogCancel className="w-full">Got it</AlertDialogCancel>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/alert-dialog.json

Usage

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
 
export function Example() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="outline">Delete</Button>} />
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

RTL

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
 
export function AlertDialogRtlExample() {
  return (
    <AlertDialog>
      <AlertDialogTrigger
        render={<Button variant="outline">حذف حساب</Button>}
      />
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>کاملاً مطمئن هستید؟</AlertDialogTitle>
          <AlertDialogDescription>
            این عمل قابل بازگشت نیست. حساب شما برای همیشه حذف و اطلاعات آن از
            سرورهای ما پاک خواهد شد.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>انصراف</AlertDialogCancel>
          <AlertDialogAction>ادامه</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

API Reference

AlertDialog

AlertDialogContent

Edit this page on GitHub
PreviousAccordionNextBreadcrumb