A modal window that overlays the page for a focused task or piece of content, with a translucent glass frame, backdrop, focus trap, and a built-in corner close button.
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogBody,
DialogFooter,
DialogClose,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/dialog-utils/button";
export default function DialogDemo() {
return (
<Dialog>
<DialogTrigger
render={<Button variant="outline">Invite people</Button>}
/>
<DialogContent>
<DialogHeader>
<DialogTitle>Invite your team</DialogTitle>
<DialogDescription>Send an invitation by email.</DialogDescription>
</DialogHeader>
<DialogBody>{/* form, content, … */}</DialogBody>
<DialogFooter>
<DialogClose render={<Button variant="outline">Cancel</Button>} />
<DialogClose render={<Button>Send invites</Button>} />
</DialogFooter>
</DialogContent>
</Dialog>
);
}
