Dialog
A popup that opens on top of the entire page.
Loading...
Loading code...
Installation
Usage
import {
Dialog,
DialogDescription,
DialogFooter,
DialogHeader,
DialogPopup,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"<Dialog>
<DialogTrigger>Open Dialog</DialogTrigger>
<DialogPopup>
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
<DialogDescription>Dialog Description</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose>Close</DialogClose>
</DialogFooter>
</DialogPopup>
</Dialog>Examples
Open from a Menu
Loading...
Loading code...
Nested Dialogs
Loading...
Loading code...
Close Confirmation
Loading...
Loading code...
Comparing with Radix / shadcn
If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with ui/topia quickly.
Quick Checklist
- Replace
asChild→renderonDialogTriggerand closing buttons - Prefer
DialogPopup;DialogContentremains for legacy - If you used
asChildon any other parts, switch to therenderprop
Comparison Example
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Show Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
<DialogDescription>Dialog Description</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose asChild>
<Button variant="ghost">Cancel</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog><Dialog>
<DialogTrigger render={<Button variant="outline" />}>
Show Dialog
</DialogTrigger>
<DialogPopup>
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
<DialogDescription>Dialog Description</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose render={<Button variant="ghost" />}>Cancel</DialogClose>
</DialogFooter>
</DialogPopup>
</Dialog>