Components
Loading preview...
HeroUI AlertDialog for critical confirmations, with status icons, placements, backdrop variants, sizes, custom icons, dismiss behavior, controlled state and custom trigger examples. Uses the real @heroui/react component with bundled @heroui/styles CSS.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-alert-dialog"use client"
import { AlertDialog } from "@/components/ui/heroui-alert-dialog"
import { Button } from "@heroui/react"
const examples = [
{ trigger: "Sign Out", status: "accent", header: "Sign out of your account?", body: "You'll need to sign in again to access your account. Any unsaved changes will be lost.", cancel: "Stay Signed In", confirm: "Sign Out", className: "bg-accent-soft text-accent-soft-foreground" },
{ trigger: "Complete Task", status: "success", header: "Complete this task?", body: "This will mark the task as complete and notify all team members. The task will be moved to your completed list.", cancel: "Not Yet", confirm: "Mark Complete", className: "bg-success-soft text-success-soft-foreground" },
{ trigger: "Discard Changes", status: "warning", header: "Discard unsaved changes?", body: "You have unsaved changes that will be permanently lost. Are you sure you want to discard them?", cancel: "Keep Editing", confirm: "Discard", className: "bg-warning-soft text-warning-soft-foreground" },
{ trigger: "Delete Account", status: "danger", header: "Delete your account?", body: "This will permanently delete your account and remove all your data from our servers. This action is irreversible.", cancel: "Cancel", confirm: "Delete Account", className: "bg-danger-soft text-danger-soft-foreground" },
] as const
export default function Statuses() {
return (
<div className="flex flex-wrap justify-center gap-4">
{examples.map((item) => (
<AlertDialog key={item.status}>
<Button className={item.className}>{item.trigger}</Button>
<AlertDialog.Backdrop>
<AlertDialog.Container>
<AlertDialog.Dialog className="sm:max-w-[400px]">
<AlertDialog.CloseTrigger />
<AlertDialog.Header>
<AlertDialog.Icon status={item.status} />
<AlertDialog.Heading>{item.header}</AlertDialog.Heading>
</AlertDialog.Header>
<AlertDialog.Body><p>{item.body}</p></AlertDialog.Body>
<AlertDialog.Footer>
<Button slot="close" variant="tertiary">{item.cancel}</Button>
<Button slot="close" variant={item.status === "danger" ? "danger" : "primary"}>{item.confirm}</Button>
</AlertDialog.Footer>
</AlertDialog.Dialog>
</AlertDialog.Container>
</AlertDialog.Backdrop>
</AlertDialog>
))}
</div>
)
}