Dialog

const [open, setOpen] = useState(false);

return (
  <>
    <Button onClick={() => setOpen(true)}>Open Dialog</Button>
    <Dialog open={open} onClose={() => setOpen(false)}>
      <DialogHeader>
        <h2>Dialog Title</h2>
        <p>Dialog description here</p>
      </DialogHeader>
      <DialogBody>
        <p>Dialog content goes here.</p>
      </DialogBody>
      <DialogFooter>
        <Button variant="outline" onClick={() => setOpen(false)}>
          Cancel
        </Button>
        <Button onClick={() => setOpen(false)}>Confirm</Button>
      </DialogFooter>
    </Dialog>
  </>
);