Dialog
A window overlaid on the primary window, rendering the content underneath inert.
Installation
npx shadcn@latest add @uqudo/dialogInstalling it also installs Button, which it depends on for the close buttons.
Usage
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/uqudo/ui/dialog"<Dialog>
<DialogTrigger>Open</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently delete your account.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose>Cancel</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>DialogContent already renders the portal, the overlay and a close button in
the top corner. Pass showCloseButton={false} to drop the corner button when
the footer provides its own way out.
API Reference
Dialog
Prop
Type
DialogContent
Prop
Type
DialogFooter
Prop
Type
Sub-components
| Component | Renders | Notes |
|---|---|---|
DialogTrigger | Dialog.Trigger | Use asChild to wrap your own button. |
DialogClose | Dialog.Close | Closes the dialog when activated. |
DialogPortal | Dialog.Portal | Already included in DialogContent. |
DialogOverlay | Dialog.Overlay | Already included in DialogContent. |
DialogHeader | <div> | Vertical stack for title and description. |
DialogTitle | Dialog.Title | Required for accessibility. |
DialogDescription | Dialog.Description | Muted supporting text. |
Data attributes
Every part carries a data-slot attribute: dialog, dialog-trigger,
dialog-portal, dialog-close, dialog-overlay, dialog-content,
dialog-header, dialog-footer, dialog-title and dialog-description.