Dialog
Centered modal on overlay-dialog with overlay-dialog-shadow.
import { Dialog } from "@cynco-labs/ui"; Example
import {
Button,
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@cynco-labs/ui";
export default function DialogDemo() {
return (
<Dialog defaultOpen modal={false}>
<DialogContent className="max-w-[420px]">
<DialogHeader>
<DialogTitle>Void invoice</DialogTitle>
<DialogDescription>
INV-2026-0142 will be reversed in the ledger and marked Void. This cannot be undone.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="secondary">Cancel</Button>
<Button variant="destructive">Void invoice</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
} Use
Confirmations and short, blocking decisions. Longer forms go in a Sheet.
Props
open/onOpenChange; DialogContent (showCloseButton), DialogHeader › DialogTitle + DialogDescription, DialogFooter with secondary then primary/destructive buttons.