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 dialog

Usage

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.

NameTypeDefaultDescription
openboolean—Controlled open state.
defaultOpenbooleanfalseOpens 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.
classNamestring—Merged onto the part with cn.

Accessibility

  • The panel is role="dialog" and aria-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.