Dialog

1<Dialog>
2  <DialogTrigger asChild>
3    <Button>&gt; EDIT PROFILE</Button>
4  </DialogTrigger>
5  <DialogContent>
6    <DialogHeader>
7      <DialogTitle>Edit profile</DialogTitle>
8      <DialogDescription>
9        Make changes to your profile here.
10      </DialogDescription>
11    </DialogHeader>
12    <div className="grid gap-4 py-4">
13      <div className="grid grid-cols-4 items-center gap-4">
14        <Label htmlFor="name" className="text-right">
15          {formatLabel("Name")}
16        </Label>
17        <Input id="name" className="col-span-3" />
18      </div>
19      <div className="grid grid-cols-4 items-center gap-4">
20        <Label htmlFor="username" className="text-right">
21          {formatLabel("Username")}
22        </Label>
23        <Input id="username" className="col-span-3" />
24      </div>
25    </div>
26    <DialogFooter>
27      <Button type="submit">&gt; SAVE CHANGES</Button>
28    </DialogFooter>
29  </DialogContent>
30</Dialog>

1<Dialog>
2  <DialogTrigger asChild>
3    <Button variant="destructive">&gt; DELETE ACCOUNT</Button>
4  </DialogTrigger>
5  <DialogContent>
6    <DialogHeader>
7      <DialogTitle>Delete Account</DialogTitle>
8      <DialogDescription>
9        This action cannot be undone.
10      </DialogDescription>
11    </DialogHeader>
12    <DialogFooter>
13      <Button variant="outline">&gt; CANCEL</Button>
14      <Button variant="destructive">&gt; DELETE ACCOUNT</Button>
15    </DialogFooter>
16  </DialogContent>
17</Dialog>

1<Dialog>
2  <DialogTrigger asChild>
3    <Button variant="outline">&gt; WIDE DIALOG</Button>
4  </DialogTrigger>
5  <DialogContent className="sm:max-w-[600px]">
6    <DialogHeader>
7      <DialogTitle>Custom Width Dialog</DialogTitle>
8      <DialogDescription>
9        Custom width of 600px on larger screens.
10      </DialogDescription>
11    </DialogHeader>
12  </DialogContent>
13</Dialog>

1const [open, setOpen] = useState(false);
2
3<Dialog open={open} onOpenChange={setOpen}>
4  <DialogTrigger asChild>
5    <Button>&gt; OPEN</Button>
6  </DialogTrigger>
7  <DialogContent>
8    <DialogHeader>
9      <DialogTitle>Controlled State</DialogTitle>
10    </DialogHeader>
11  </DialogContent>
12</Dialog>

1<Dialog>
2  <DialogTrigger asChild>
3    <Button variant="ghost">&gt; SIMPLE DIALOG</Button>
4  </DialogTrigger>
5  <DialogContent>
6    <DialogHeader>
7      <DialogTitle>Simple Title Only</DialogTitle>
8    </DialogHeader>
9    <div className="py-4">
10      <p>Content goes here</p>
11    </div>
12  </DialogContent>
13</Dialog>