Dialog

A window overlaid on the primary content, rendering content in a layer above the page.

Preview

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

export function DialogDemo() {
  return (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="outline">Edit Profile</Button>
    </DialogTrigger>
    <DialogContent className="sm:max-w-[425px]">
      <DialogHeader>
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription>
          Make changes to your profile here. Click save when you're done.
        </DialogDescription>
      </DialogHeader>
      <div className="grid gap-4 py-4">
        <div className="grid grid-cols-4 items-center gap-4">
          <label htmlFor="name" className="text-right text-sm font-medium">
            Name
          </label>
          <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
        </div>
        <div className="grid grid-cols-4 items-center gap-4">
          <label htmlFor="username" className="text-right text-sm font-medium">
            Username
          </label>
          <Input
            id="username"
            defaultValue="@peduarte"
            className="col-span-3"
          />
        </div>
      </div>
      <DialogFooter>
        <Button type="submit">Save changes</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
);
}

Installation

Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces

pnpm dlx shadcn@latest add @aura/dialog

Usage

CustomContent

export const CustomContent = () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="pill">Open Dialog</Button>
    </DialogTrigger>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Are you sure 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>
        <DialogClose asChild>
          <Button variant="fill">Cancel</Button>
        </DialogClose>
        <Button variant="pill">Continue</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
);

Props

Prop	Type	Default
All props from	`DialogPrimitive.Root`	-

DialogClose

Prop	Type	Default
All props from	`DialogPrimitive.Close`	-

DialogContent

Prop	Type	Default
All props from	`DialogPrimitive.Content`	-

DialogDescription

Prop	Type	Default
All props from	`DialogPrimitive.Description`	-

DialogFooter

Prop	Type	Default
All props from	`"div"`	-

DialogHeader

Prop	Type	Default
All props from	`"div"`	-

DialogOverlay

Prop	Type	Default
All props from	`DialogPrimitive.Overlay`	-

DialogPortal

Prop	Type	Default
All props from	`DialogPrimitive.Portal`	-

DialogTitle

Prop	Type	Default
All props from	`DialogPrimitive.Title`	-

DialogTrigger

Prop	Type	Default
All props from	`DialogPrimitive.Trigger`	-

Dialog

On this page