Overlays

Dialog

Modal dialog with header and footer.

Import

tsx

import { Dialog } from "@cooud-ui/ui";

bash

npx cooud-ui add dialog

Examples

Basic

A modal dialog with a header, body, and footer rendered in a portal.

tsx

<Dialog>
  <DialogTrigger asChild>
    <Button>Edit profile</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>
        Update your display name. Changes are saved when you confirm.
      </DialogDescription>
    </DialogHeader>
    <div className="flex flex-col gap-4 py-2">
      <div className="flex flex-col gap-2">
        <Label htmlFor="name">Name</Label>
        <Input id="name" defaultValue="Ada Lovelace" />
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="username">Username</Label>
        <Input id="username" defaultValue="ada" />
      </div>
    </div>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <DialogClose asChild>
        <Button>Save changes</Button>
      </DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

API Reference

Generated from the component's exported types.

DialogContentProps

Extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>

Prop	Type	Default	Description
`showCloseButton`	`boolean`	`true`	Render the built-in top-right close button. Set `false` when the content supplies its own close affordance (e.g. a full-bleed gallery header).