Alert 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
nativeButton={false}
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
nativeButton={false}
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 whenever you compose a trigger or close
with a liqui Button. The glass anatomy is invalid inside a native
<button>, so liqui's button 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. 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 a plain dialog otherwise.