Dialog

The Dialog primitive wraps Radix Dialog — a modal overlay for a focused task such as an edit form or a confirmation. It renders a close button by default and can be dismissed by the overlay or the escape key. For destructive confirmations that should not be dismissed casually, use Alert Dialog.

Preview

import { Button } from '@web/components/ui/button';import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from '@web/components/ui/dialog';import { Input } from '@web/components/ui/input';import { Label } from '@web/components/ui/label';export default function DialogDemo() {  return (    <Dialog>      <DialogTrigger asChild>        <Button variant="outline">Edit profile</Button>      </DialogTrigger>      <DialogContent>        <DialogHeader>          <DialogTitle>Edit profile</DialogTitle>          <DialogDescription>            Update your display name. Changes are saved when you submit.          </DialogDescription>        </DialogHeader>        <div className="grid gap-2">          <Label htmlFor="dialog-demo-name">Name</Label>          <Input id="dialog-demo-name" defaultValue="Ada Lovelace" />        </div>        <DialogFooter showCloseButton>          <Button>Save changes</Button>        </DialogFooter>      </DialogContent>    </Dialog>  );}

Import

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

Props

DialogContent accepts every Radix Dialog.Content prop plus a showCloseButton toggle (default true). The table is generated at build time from the real DialogContentProps type in the apps/web source. DialogFooter takes a matching showCloseButton (default false) to render a "Close" button.

Prop

Type

Preview

Import

Props

On this page