diff --git a/src/components/SummaryConfirmation/DisabledClickableButtonWrapper.js b/src/components/SummaryConfirmation/DisabledClickableButtonWrapper.js
new file mode 100644
index 000000000..9a3997c82
--- /dev/null
+++ b/src/components/SummaryConfirmation/DisabledClickableButtonWrapper.js
@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const DisabledClickableButtonWrapper = ({disabled, onDisabledClick, children}) => {
+ if (!disabled) return <>{children}>;
+
+ return (
+
+ );
+};
+
+DisabledClickableButtonWrapper.propTypes = {
+ disabled: PropTypes.bool.isRequired,
+ onDisabledClick: PropTypes.func.isRequired,
+ children: PropTypes.node.isRequired,
+};
+
+export default DisabledClickableButtonWrapper;
diff --git a/src/components/SummaryConfirmation/index.js b/src/components/SummaryConfirmation/index.js
index 00145be60..a3a2ea9ea 100644
--- a/src/components/SummaryConfirmation/index.js
+++ b/src/components/SummaryConfirmation/index.js
@@ -12,6 +12,8 @@ import {Toolbar, ToolbarList} from 'components/Toolbar';
import {SUBMISSION_ALLOWED} from 'components/constants';
import useFormContext from 'hooks/useFormContext';
+import DisabledClickableButtonWrapper from './DisabledClickableButtonWrapper';
+
const isSubmitEnabled = (statementsInfo = [], statementsValues) => {
return statementsInfo.every(info => {
if (!info.validate.required) return true;
@@ -46,15 +48,20 @@ const SummaryConfirmation = ({submissionAllowed, onPrevPage}) => {
{canSubmit ? (
- setShowStatementWarnings(true)}
>
-
-
+
+
+
+
) : null}
diff --git a/src/scss/components/_disabled-clickable-button.scss b/src/scss/components/_disabled-clickable-button.scss
new file mode 100644
index 000000000..0d2637875
--- /dev/null
+++ b/src/scss/components/_disabled-clickable-button.scss
@@ -0,0 +1,15 @@
+@import '../mixins/prefix';
+
+.#{prefix(disabled-clickable-button)} {
+ position: relative;
+
+ &__clickable-wrap::before {
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
diff --git a/src/styles.scss b/src/styles.scss
index 12d60dbf3..357a6e3e7 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -63,3 +63,4 @@
@import './scss/components/floating-widget';
@import './scss/components/date-picker';
@import './scss/components/input-container';
+@import './scss/components/disabled-clickable-button';