Modal

Modal to display content in a portal, triggered by a button.

You should pass the values for max-width and/or max-height to the modal body depending on the fit you want for your use case. The modal will always be 95% of the viewport width and height at most to ensure it is responsive.


<Modal isOpen={longOpen} onRequestClose={() => setLongOpen(false)}>
  <Modalbody>
    <ModalTitle>Long content title</ModalTitle>
    {longContent}
  </Modalbody>
</Modal>


<Modal isOpen={resizedLongOpen} onRequestClose={() => setResizedLongOpen(false)}>
  <Modalbody className="max-h-96 max-w-5xl">
    <ModalTitle>Long content title</ModalTitle>
    {longContent}
  </Modalbody>
</Modal>


<Modal isOpen={shortOpen} onRequestClose={() => setShortOpen(false)}>
  <Modalbody className="max-w-2xl">
    <ModalTitle>Short content title</ModalTitle>
    {shortContent}
  </Modalbody>
</Modal>