Modal

<Button
  onClick={toggleModal}
  aria-expanded={isOpen}
  aria-controls="#ModalExample"
>
  {isOpen ? "Close" : "Open"} Modal
</Button>
...
<Modal id="ModalExample" isOpen={isOpen} onClose={handleClose}>
  <ModalDialog>
    <ModalHeader>Modal Title</ModalHeader>
    <ModalBody>Modal Body</ModalBody>
    <ModalFooter description="Modal Footer description">
      <Button color="primary">Confirm</Button>
      <Button color="secondary" onClick={handleClose}>
        Cancel
      </Button>
    </ModalFooter>
  </ModalDialog>
</Modal>

<Button
color="primary"
data-spirit-toggle="modal"
data-spirit-target="#example_modal"
aria-controls="example_modal"
aria-expanded="false"
>
    Open Modal
</Button>
...
<Modal
id="example_modal"
titleId="example_modal_title"
>
    <ModalDialog>
<ModalHeader
        closeLabel="Close"
        modalId="example_modal"
        titleId="example_modal_title"
>
    Modal Title
</ModalHeader>
<ModalBody>
    <p>Modal Body</p>
</ModalBody>
<ModalFooter description="Modal Footer description">
    <Button color="primary">
        Confirm
    </Button>
    <Button color="secondary"
            data-spirit-dismiss="modal"
            data-spirit-target="#example_modal"
    >
        Cancel
    </Button>
</ModalFooter>
    </ModalDialog>
</Modal>