Modal

import { Modal, ModalDialog, ModalHeader, ModalBody, ModalFooter, Button } from "@seduo/design-system";
...
<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>