Centered alert dialog for confirmations, with a destructive variant.
npx shadcn@latest add @lokalhost/modalAlso installs Buttons.
The source is copied to components/ui/dialog.tsx — it’s yours to edit.
import { Button } from "@/components/ui/button";
import { Dialog } from "@/components/ui/dialog";
<Dialog
open={open}
onClose={() => setOpen(false)}
title="Delete account?"
description="This permanently removes your profile, posts and messages. This can’t be undone."
confirmLabel="Delete"
destructive
onConfirm={() => console.log("deleted")}
/>| Prop | Type | Default | Description |
|---|---|---|---|
openrequired | boolean | — | Controls visibility. |
onCloserequired | () => void | — | Called on cancel, backdrop press or Android back. |
titlerequired | string | — | Dialog heading. |
description | string | undefined | Supporting text. |
confirmLabel | string | "Confirm" | Primary action label. |
cancelLabel | string | "Cancel" | Secondary action label. |
destructive | boolean | false | Styles the confirm action as destructive. |
onConfirm | () => void | undefined | Primary action handler. |