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 variants = ["opaque", "blur", "transparent"] as const
export default function BackdropVariants() {
return (
<div className="flex flex-wrap justify-center gap-4">
{variants.map((variant) => (
<AlertDialog key={variant}>
<Button variant="secondary">{variant.charAt(0).toUpperCase() + variant.slice(1)}</Button>
<AlertDialog.Backdrop variant={variant}>
<AlertDialog.Container>
<AlertDialog.Dialog className="sm:max-w-[400px]">
<AlertDialog.CloseTrigger />
<AlertDialog.Header>
<AlertDialog.Icon status="accent" />
<AlertDialog.Heading>Backdrop: {variant.charAt(0).toUpperCase() + variant.slice(1)}</AlertDialog.Heading>
</AlertDialog.Header>
<AlertDialog.Body>
<p>{variant === "opaque" ? "An opaque dark backdrop that completely obscures the background, providing maximum focus on the dialog." : variant === "blur" ? "A blurred backdrop that softly obscures the background while maintaining visual context." : "A transparent backdrop that keeps the background fully visible, useful for less critical confirmations."}</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>
)
}