Liqui DesignAlert Dialog
A modal confirmation dialog on the library's largest glass surface.
Installation
npx shadcn@latest add https://liqui.design/r/alert-dialog.jsonInstalling more than one? Register the namespace once in components.json and
drop the URLs:
{
"registries": {
"@liqui-design": "https://liqui.design/r/{name}.json"
}
}npx shadcn@latest add @liqui-design/alert-dialogUsage
import {
AlertDialog,
AlertDialogActions,
AlertDialogClose,
AlertDialogContent,
AlertDialogDescription,
AlertDialogTitle,
AlertDialogTrigger,
} from '@/components/ui/alert-dialog';<AlertDialog>
<AlertDialogTrigger render={<Button variant="danger">Delete</Button>} />
<AlertDialogContent>
<AlertDialogTitle>Delete this workspace?</AlertDialogTitle>
<AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
<AlertDialogActions>
<AlertDialogClose nativeButton={false} render={<Button>Cancel</Button>} />
<AlertDialogClose render={<Button variant="danger">Delete</Button>} />
</AlertDialogActions>
</AlertDialogContent>
</AlertDialog>render is Base UI's composition prop: the trigger and close become the
button rather than wrapping it, so you don't end up with a button inside a
button.
nativeButton={false} is required when you compose a trigger or close with a
glass Button. The glass anatomy is invalid inside a native <button>,
so that variant is not one — and Base UI logs an error unless the composing
component is told that. Omit it and everything still works, but the console
fills up.
Do not pass it with a solid accent or danger button: those are real
<button> elements, and it would put role="button" and a second set of key
handlers on one. See
Button.
Notes
It refracts a dimmed backdrop
This is the only surface in the library sitting on a scrim. That changes how the
dials read: the page behind is already darkened and blurred by
--lq-scrim + backdrop-blur-[2px], so a frost value tuned against bare
wallpaper will look far too heavy here.
Tune dialog optics against the scrim, not against the other components.
Alert vs. dialog
AlertDialog is deliberately modal and un-dismissible by click-outside or
Escape — Base UI enforces that. It is for decisions the user must answer, not
for a panel they might wander away from. Reach for
Dialog otherwise — same surface, same scrim, but
dismissible and with a corner close.