Dialog
A modal panel for a focused task.
Overview
Dialog is built with React and the browser. It does not use a dialog library. Pass one element to DialogTrigger. The trigger receives the click handler and the ref. There is no asChild prop.
DialogTitle and DialogDescription supply the ids for aria-labelledby and aria-describedby.
Preview
Installation
Add the component with the CLI. It copies the files in and installs anything they depend on.
npx vinyaas add dialogUsage
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
export function ConfirmDialog() {
return (
<Dialog>
<DialogTrigger>
<Button variant="outline">Open</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline">Cancel</Button>
<Button>Continue</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}Examples
Edit profile
The trigger is a button. The dialog holds a label, an input, and a textarea. Cancel and Save close it.
Sizes
size on DialogContent changes the box width and maximum height. Use lg or xl for tables and side-by-side layouts, and full for editors that need the whole viewport.
Account settings
A longer form scrolls inside the dialog. The page behind it does not scroll.
In practice
A project row keeps the destructive action behind a confirmation. Cancel stays available; the badge names what will be removed.
vinyaas-web
Production · us-east-1
API
Other attributes for the underlying element are passed through.
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Opens the dialog on first render when it is uncontrolled. |
onOpenChange | (open: boolean) => void | — | Called when the dialog opens or closes. |
size | "sm" | "default" | "lg" | "xl" | "full" | "default" | DialogContent. Sets the box width and maximum height. default is max-w-lg; lg, xl, and full give wide content more room. |
className | string | — | Merged onto the part with cn. |
Accessibility
- The panel is
role="dialog"andaria-modal="true". - Escape closes the top-most dialog.
- Focus moves into the dialog and returns to the trigger.
- The page body does not scroll while a dialog is open.
- Long content scrolls inside the panel.