diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js b/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
index 65b7e77807..c0fa889dd5 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
@@ -146,8 +146,8 @@ export const buttonGroupConfig = {
       visibility: { value: '{{true}}' },
       borderRadius: { value: '{{4}}' },
       disabledState: { value: '{{false}}' },
-      selectedTextColor: { value: '' },
-      selectedBackgroundColor: { value: '' },
+      selectedTextColor: { value: '#FFFFFF' },
+      selectedBackgroundColor: { value: '#4368E3' },
     },
   },
 };
diff --git a/frontend/src/Editor/Components/ButtonGroup.jsx b/frontend/src/Editor/Components/ButtonGroup.jsx
index 9711820bc7..7364348271 100644
--- a/frontend/src/Editor/Components/ButtonGroup.jsx
+++ b/frontend/src/Editor/Components/ButtonGroup.jsx
@@ -34,6 +34,12 @@ export const ButtonGroup = function Button({
     display: visibility ? '' : 'none',
   };
 
+  const disabledStyles = {
+    opacity: 0.5,
+    pointerEvents: 'none',
+    cursor: 'not-allowed',
+  };
+
   const [defaultActive, setDefaultActive] = useState(defaultSelected);
   const [data, setData] = useState(values);
 
@@ -62,7 +68,7 @@ export const ButtonGroup = function Button({
 
   const buttonClick = (index) => {
     if (defaultActive?.includes(values[index]) && multiSelection) {
-      const copyDefaultActive = defaultActive;
+      const copyDefaultActive = [...defaultActive];
       copyDefaultActive?.splice(copyDefaultActive?.indexOf(values[index]), 1);
       setDefaultActive(copyDefaultActive);
       setExposedVariable('selected', copyDefaultActive.join(','));
@@ -100,6 +106,7 @@ export const ButtonGroup = function Button({
               color: defaultActive?.includes(values[index]) ? selectedTextColor : textColor,
               transition: 'all .1s ease',
               boxShadow,
+              ...(disabledState && disabledStyles),
             }}
             key={index}
             disabled={disabledState}
diff --git a/server/src/helpers/widget-config/buttonGroup.js b/server/src/helpers/widget-config/buttonGroup.js
index 65b7e77807..c0fa889dd5 100644
--- a/server/src/helpers/widget-config/buttonGroup.js
+++ b/server/src/helpers/widget-config/buttonGroup.js
@@ -146,8 +146,8 @@ export const buttonGroupConfig = {
       visibility: { value: '{{true}}' },
       borderRadius: { value: '{{4}}' },
       disabledState: { value: '{{false}}' },
-      selectedTextColor: { value: '' },
-      selectedBackgroundColor: { value: '' },
+      selectedTextColor: { value: '#FFFFFF' },
+      selectedBackgroundColor: { value: '#4368E3' },
     },
   },
 };