Browse components
Alert Dialog
Confirmation modal on the native <dialog> with a springy scale-in, focus starting on Cancel, async confirm with spinner and destructive styling.
Installation
npx shadcn@latest add @glint-ui/alert-dialogFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/alert-dialog.json
Usage
import { AlertDialog } from "@/components/ui/alert-dialog";
<AlertDialog
trigger="Delete project"
title="Delete this project?"
description="This cannot be undone."
confirmLabel="Delete"
destructive
onConfirm={() => deleteProject(id)}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Delete this project?" | Dialog heading. |
| description | string | "This permanently removes Acme Web, its 214 deployments and all environment variables. This cannot be undone." | Supporting text. |
| trigger | string | "Delete project" | Label of the built-in trigger button. Omit to control via open. |
| confirmLabel | string | "Continue" | Confirm button label. |
| cancelLabel | string | "Cancel" | Cancel button label. |
| destructive | boolean | false | Red confirm button and warning icon. |
| onConfirm | ReactNode | — | Called on confirm. Return a promise to show a spinner until it settles. |
| onCancel | ReactNode | — | Called on cancel or Escape. |
| open | ReactNode | — | Controlled open state (with onOpenChange). |
| position | "fixed" | "absolute" | "fixed" | fixed = true modal; absolute = contained in the nearest positioned parent. |
| className | string | — | Extra classes for the root element. |