Modal

Demo

Demo

Usage

<>
  <Button className="uppercase" onClick={() => setIsBasicModalActive(true)}>
    Open Modal
  </Button>
  <Modal
    active={isBasicModalActive}
    onClose={() => setIsBasicModalActive(false)}
  >
    <ModalHeader>Modal Title</ModalHeader>
    <ModalBody>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
      sit amet.
    </ModalBody>
    <ModalFooter>
      <div className="flex ltr:ml-auto rtl:mr-auto">
        <button
          className="btn btn_secondary uppercase"
          onClick={() => setIsBasicModalActive(false)}
        >
          Close
        </button>
        <button className="btn btn_primary ltr:ml-2 rtl:mr-2 uppercase">
          Save Changes
        </button>
      </div>
    </ModalFooter>
  </Modal>
</>

Props

Property	Type	Default	Required	Description
active	boolean		no	Is Modal active
centered	boolean		no	Is Modal centered
scrollable	boolean		no	Is Modal scrollable
staticBackdrop	boolean	false	no	Close Modal when backdrop is clicked
aside	boolean		no	If the Modal is palced at a side
onClose	function		no	Callback function when the Modal is closed