Dialog that insists on a title, plus a confirm dialog for destructive actions: type-to-confirm and a promise-aware button that shows its own pending state. Part of the Layro System: layro.vercel.app.
import * as React from "react";
import { Button, ConfirmDialog, Dialog, DialogClose, DialogContent, DialogFooter, DialogTrigger } from "@/components/ui/layro-dialog";
import { Trash2 } from "lucide-react";
/* A dialog that insists on a title, and a confirm dialog for the
destructive case: type the workspace name to enable the button, and the
action shows its own pending state while the promise runs. */
export default function DialogDemo() {
const [done, setDone] = React.useState<string | null>(null);
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
<div className="w-full min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-6 text-card-foreground ring-1 ring-border" style={{ maxWidth: 420 }}>
<h2 className="text-[16px] font-semibold tracking-[-0.01em]">Danger zone</h2>
<div className="mb-5" />
<div className="flex flex-wrap gap-2">
<Dialog>
<DialogTrigger asChild><Button variant="outline">Rename project</Button></DialogTrigger>
<DialogContent title="Rename project" description="Everyone with access sees the new name straight away.">
<input defaultValue="Northwind rebrand" aria-label="Project name" autoFocus className="h-9 w-full rounded-[10px] [corner-shape:squircle] bg-card px-3 text-[13px] ring-1 ring-inset ring-input outline-none focus-visible:ring-2 focus-visible:ring-ring" />
<DialogFooter>
<DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>
<DialogClose asChild><Button onClick={() => setDone("Project renamed.")}>Save</Button></DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
<ConfirmDialog
trigger={<Button variant="destructive"><Trash2 /> Delete workspace</Button>}
title="Delete Northwind Studio?"
description="9 people lose access and every file is deleted after 30 days."
actionLabel="Delete workspace"
confirmText="Northwind Studio"
onConfirm={() => new Promise<void>((r) => setTimeout(() => { setDone("Workspace deleted. Restorable for 30 days."); r(); }, 900))}
/>
</div>
<p className="mt-4 text-[12.5px] text-muted-foreground" aria-live="polite">{done ?? "Nothing changed yet."}</p>
</div>
</div>
);
}
Part of Layro System — browse the full library on 21st.dev.