diff --git a/packages/web-react/src/components/Modal/demo/ModalDefault.tsx b/packages/web-react/src/components/Modal/demo/ModalDefault.tsx
index 3572b15797..b470299f1c 100644
--- a/packages/web-react/src/components/Modal/demo/ModalDefault.tsx
+++ b/packages/web-react/src/components/Modal/demo/ModalDefault.tsx
@@ -79,10 +79,8 @@ const ModalDefault = () => {
             </form>
           </ModalBody>
           <ModalFooter description="Optional description" alignmentX={footerAlign}>
-            <Button data-spirit-dismiss="modal" data-spirit-target="#example_basic">
-              Primary action
-            </Button>
-            <Button color="secondary" data-spirit-dismiss="modal" data-spirit-target="#example_basic">
+            <Button onClick={handleFirstClose}>Primary action</Button>
+            <Button color="secondary" onClick={handleFirstClose}>
               Secondary action
             </Button>
           </ModalFooter>
@@ -103,7 +101,7 @@ const ModalDefault = () => {
           </ModalBody>
           <ModalFooter>
             <Button type="submit">Primary action</Button>
-            <Button color="secondary" data-spirit-dismiss="modal" data-spirit-target="#example_form">
+            <Button color="secondary" onClick={handleSecondClose}>
               Secondary action
             </Button>
           </ModalFooter>
@@ -137,8 +135,8 @@ const ModalDefault = () => {
             </p>
           </ModalBody>
           <ModalFooter>
-            <Button type="submit">Primary action</Button>
-            <Button color="secondary" data-spirit-dismiss="modal" data-spirit-target="#example_custom_height">
+            <Button onClick={handleThirdClose}>Primary action</Button>
+            <Button color="secondary" onClick={handleThirdClose}>
               Secondary action
             </Button>
           </ModalFooter>
diff --git a/packages/web-react/src/components/Modal/demo/ModalDisabledBackdropClick.tsx b/packages/web-react/src/components/Modal/demo/ModalDisabledBackdropClick.tsx
index 9704675209..0594197386 100644
--- a/packages/web-react/src/components/Modal/demo/ModalDisabledBackdropClick.tsx
+++ b/packages/web-react/src/components/Modal/demo/ModalDisabledBackdropClick.tsx
@@ -21,9 +21,7 @@ const ModalDisabledBackdropClick = () => {
             </p>
           </ModalBody>
           <ModalFooter>
-            <Button color="primary" onClick={handleClose}>
-              Primary action
-            </Button>
+            <Button onClick={handleClose}>Primary action</Button>
             <Button color="secondary" onClick={handleClose}>
               Secondary action
             </Button>
diff --git a/packages/web-react/src/components/Modal/demo/ModalStacked.tsx b/packages/web-react/src/components/Modal/demo/ModalStacked.tsx
index a0cca0ce92..004b410a60 100644
--- a/packages/web-react/src/components/Modal/demo/ModalStacked.tsx
+++ b/packages/web-react/src/components/Modal/demo/ModalStacked.tsx
@@ -65,9 +65,7 @@ const Story = (props: unknown) => {
             </p>
           </ModalBody>
           <ModalFooter>
-            <Button color="primary" onClick={toggleSecondModal}>
-              Open stacked
-            </Button>
+            <Button onClick={toggleSecondModal}>Open stacked</Button>
             <Button color="tertiary" onClick={handleFirstClose}>
               Cancel
             </Button>
diff --git a/packages/web-react/src/components/Modal/demo/ModalWithCheckbox.tsx b/packages/web-react/src/components/Modal/demo/ModalWithCheckbox.tsx
deleted file mode 100644
index 21fe65def4..0000000000
--- a/packages/web-react/src/components/Modal/demo/ModalWithCheckbox.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-// Because there is no `dist` directory during the CI run
-/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
-import React, { useState } from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: No declaration file
-import icons from '@lmc-eu/spirit-icons/dist/icons';
-import { IconsProvider } from '../../../context';
-import Modal from '../Modal';
-import ModalDialog from '../ModalDialog';
-import ModalBody from '../ModalBody';
-import ModalHeader from '../ModalHeader';
-import ModalFooter from '../ModalFooter';
-import { Button } from '../../Button';
-import { Checkbox } from '../../Checkbox';
-
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => {
-  const [isOpen, setOpen] = useState(false);
-  const [isChecked, setIsChecked] = useState(false);
-  const toggleModal = () => setOpen(!isOpen);
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    <IconsProvider value={icons}>
-      <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>
-            <Checkbox
-              key={`checkbox-test-${Number(isChecked)}`}
-              id="checkbox-1"
-              label="element 1"
-              isChecked={isChecked}
-              onChange={() => setIsChecked((prev) => !prev)}
-            />
-            <Checkbox label="element-2" id="checkbox-2" />
-          </ModalBody>
-          <ModalFooter>
-            <Button color="tertiary" onClick={handleClose}>
-              Cancel
-            </Button>
-          </ModalFooter>
-        </ModalDialog>
-      </Modal>
-    </IconsProvider>
-  );
-};
-
-export default Story;