Dialog

1import { 
2Button,
3Dialog,
4DialogContent,
5DialogFooter,
6DialogHeader,
7DialogTitle
8} from "@ecos/ui";
9
10<Dialog>
11  <DialogTrigger asChild>
12    <Button>Open Dialog</Button>
13  </DialogTrigger>
14
15  <DialogContent>
16    <DialogHeader>
17      <DialogTitle>Save Changes</DialogTitle>
18
19      <DialogDescription>
20        Your changes are ready to be saved.
21      </DialogDescription>
22    </DialogHeader>
23
24    <DialogFooter>
25      <Button variant="outline">Cancel</Button>
26      <Button>Save</Button>
27    </DialogFooter>
28  </DialogContent>
29</Dialog>

1<Dialog>
2  <DialogTrigger asChild>
3    <Button>Open</Button>
4  </DialogTrigger>
5
6  <DialogContent>
7    <DialogHeader>
8      <DialogTitle>Delete User</DialogTitle>
9
10      <DialogDescription>
11        Are you sure you want to delete this user?
12      </DialogDescription>
13    </DialogHeader>
14
15    <DialogFooter>
16      <Button color="error">
17        Delete
18      </Button>
19    </DialogFooter>
20  </DialogContent>
21</Dialog>

1const [open, setOpen] = useState(false);
2
3<Button color="error" onClick={() => setOpen(true)}>
4  Delete User
5</Button>
6
7<Dialog
8  open={open}
9  onOpenChange={setOpen}
10>
11  <DialogContent>
12    <DialogHeader>
13      <DialogTitle>
14        Delete User
15      </DialogTitle>
16
17      <DialogDescription>
18        Are you sure you want to delete this user?
19      </DialogDescription>
20    </DialogHeader>
21
22    <DialogFooter>
23      <Button color="error">
24        Delete
25      </Button>
26    </DialogFooter>
27  </DialogContent>
28</Dialog>

1<DialogFooter>
2  <Button variant="outline">Discard</Button>
3  <Button>Save</Button>
4</DialogFooter>

1<DialogContent showCloseButton={false}>...</DialogContent>

1<DialogContent size="sm">...</DialogContent>
2
3<DialogContent size="md">...</DialogContent>
4
5<DialogContent size="lg">...</DialogContent>
6
7<DialogContent size="xl">...</DialogContent>