Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

API Reference

<Dialog modal>
    <DialogTrigger>
        <Button>
            <User size={20} />
            Edit Profile
        </Button>
    </DialogTrigger>
    <DialogContent>
        <DialogClose />
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription>
            Make changes to your profile here. Click save when you're done.
        </DialogDescription>
        <DialogFooter>
            <DialogClose>
                <Button variant="text">Cancel</Button>
            </DialogClose>
            <DialogClose>
                <Button>Save</Button>
            </DialogClose>
        </DialogFooter>
    </DialogContent>
</Dialog>

Container Input