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"
import { Rocket } from "lucide-react"
const sizes = ["xs", "sm", "md", "lg", "cover"] as const
export default function Sizes() {
return (
<div className="flex flex-wrap justify-center gap-4">
{sizes.map((size) => (
<AlertDialog key={size}>
<Button variant="secondary">{size.charAt(0).toUpperCase() + size.slice(1)}</Button>
<AlertDialog.Backdrop>
<AlertDialog.Container size={size}>
<AlertDialog.Dialog>
<AlertDialog.CloseTrigger />
<AlertDialog.Header>
<AlertDialog.Icon className="bg-default text-foreground"><Rocket className="size-5" /></AlertDialog.Icon>
<AlertDialog.Heading>Size: {size.charAt(0).toUpperCase() + size.slice(1)}</AlertDialog.Heading>
</AlertDialog.Header>
<AlertDialog.Body>
<p>{size === "cover" ? "This alert dialog uses the cover size variant. It spans the full screen with margins while preserving alert dialog aesthetics." : `This alert dialog uses the ${size} size variant. On mobile, all sizes adapt to near full-width; on desktop, each size provides a different maximum width.`}</p>
</AlertDialog.Body>
<AlertDialog.Footer>
<Button slot="close" variant="tertiary">Cancel</Button>
<Button slot="close">Confirm</Button>
</AlertDialog.Footer>
</AlertDialog.Dialog>
</AlertDialog.Container>
</AlertDialog.Backdrop>
</AlertDialog>
))}
</div>
)
}