Dialog

Opens focused content above the page for forms, details, and short task flows.

Installation

bunx @swift-rust/ui add dialog

Usage

tsx

1import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
2 
3<Dialog>
4  <DialogTrigger>Edit profile</DialogTrigger>
5  <DialogContent>
6    <DialogHeader>
7      <DialogTitle>Edit profile</DialogTitle>
8      <DialogDescription>Update your public details.</DialogDescription>
9    </DialogHeader>
10    <DialogFooter><DialogClose>Done</DialogClose></DialogFooter>
11  </DialogContent>
12</Dialog>

Composition

Dialog is composed of these parts:

Dialog
├── DialogTrigger
└── DialogContent
    ├── DialogHeader
    │   ├── DialogTitle
    │   └── DialogDescription
    └── DialogFooter
        └── DialogClose

Examples

← Date Picker Direction →