Dialog

1import { Button } from '@/components/ui/button'
2import {
3    Dialog,
4    DialogClose,
5    DialogContent,
6    DialogDescription,
7    DialogFooter,
8    DialogHeader,
9    DialogTitle,
10    DialogTrigger,
11} from '@/components/ui/dialog'
12import { Input } from '@/components/ui/input'
13import { Label } from '@/components/ui/label'
14
15export function DialogDemo() {
16    return (
17        <Dialog>
18            <form>
19                <DialogTrigger asChild>
20                    <Button variant="outline">Log In</Button>
21                </DialogTrigger>
22                <DialogContent className="sm:max-w-[425px]">
23                    <DialogHeader>
24                        <DialogTitle>Log In</DialogTitle>
25                        <DialogDescription>
26                            Enter your details Here. Click save when you&apos;re
27                            done.
28                        </DialogDescription>
29                    </DialogHeader>
30                    <div className="grid gap-4">
31                        <div className="grid gap-3">
32                            <Label htmlFor="email-1">Email</Label>
33                            <Input
34                                id="email-1"
35                                name="email"
36                                defaultValue="rafael.costa@example.com"
37                            />
38                        </div>
39                        <div className="grid gap-3">
40                            <Label htmlFor="password-1">Password</Label>
41                            <Input
42                                id="password-1"
43                                name="password"
44                                type="password"
45                                defaultValue="rafaelCost@123"
46                            />
47                        </div>
48                    </div>
49                    <DialogFooter>
50                        <DialogClose asChild>
51                            <Button variant="outline">Cancel</Button>
52                        </DialogClose>
53                        <Button type="submit">Save changes</Button>
54                    </DialogFooter>
55                </DialogContent>
56            </form>
57        </Dialog>
58    )
59}
60

1import { Button } from '@/components/ui/button'
2import {
3    Dialog,
4    DialogClose,
5    DialogContent,
6    DialogDescription,
7    DialogFooter,
8    DialogHeader,
9    DialogTitle,
10    DialogTrigger,
11} from '@/components/ui/dialog'
12
13export function DialogCloseButton() {
14    return (
15        <Dialog>
16            <DialogTrigger asChild>
17                <Button variant="outline">View Details</Button>
18            </DialogTrigger>
19            <DialogContent className="sm:max-w-md">
20                <DialogHeader>
21                    <DialogTitle>Custom Button Details</DialogTitle>
22                    <DialogDescription>
23                        This dialog showcases a simple custom close button
24                        example. You can adapt this layout for alerts,
25                        confirmations, or informational popups where users just
26                        need to read and dismiss the message.
27                    </DialogDescription>
28                </DialogHeader>
29                <DialogFooter className="sm:justify-start">
30                    <DialogClose asChild>
31                        <Button type="button" variant="secondary">
32                            Close
33                        </Button>
34                    </DialogClose>
35                </DialogFooter>
36            </DialogContent>
37        </Dialog>
38    )
39}
40