About
Self-contained confirm dialog component with loading and destructive variant
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds confirm-dialog to your project and fits it to your theme.
Code
How confirm-dialog is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import { useState } from "react";
import ConfirmDialog from "@/components/ui/confirmdialog";
export default function ConfirmDialogDemo() {
const [open, setOpen] = useState(false);
return (
<>
<button
className="inline-flex h-9 items-center justify-center rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground shadow hover:bg-destructive/90"
onClick={() => setOpen(true)}
>
Excluir item
</button>
<ConfirmDialog
open={open}
onOpenChange={setOpen}
title="Confirmar exclusão"
description="Esta ação não pode ser desfeita. Deseja continuar?"
confirmLabel="Excluir"
cancelLabel="Cancelar"
variant="destructive"
onConfirm={() => setOpen(false)}
/>
</>
);
}