diff --git a/.changeset/warm-fireants-nail.md b/.changeset/warm-fireants-nail.md
new file mode 100644
index 00000000000..371f6d87336
--- /dev/null
+++ b/.changeset/warm-fireants-nail.md
@@ -0,0 +1,5 @@
+---
+'@razorpay/blade': patch
+---
+
+fix(blade): loading single button in buttonGroup
diff --git a/packages/blade/src/components/Button/BaseButton/BaseButton.tsx b/packages/blade/src/components/Button/BaseButton/BaseButton.tsx
index 3fbb3f57c3d..fdfb0dd7574 100644
--- a/packages/blade/src/components/Button/BaseButton/BaseButton.tsx
+++ b/packages/blade/src/components/Button/BaseButton/BaseButton.tsx
@@ -344,7 +344,9 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
   const isChildrenComponent = React.isValidElement(children);
 
   // Button cannot be disabled when its rendered as Link
-  const disabled = buttonGroupProps.isDisabled ?? (isLoading || (isDisabled && !isLink));
+  // button should be allowed to be disabled in any case...
+  // either through button group or we should allow to disable an individual button
+  const disabled = buttonGroupProps.isDisabled || isLoading || (isDisabled && !isLink);
 
   if (__DEV__) {
     if (!Icon && !childrenString?.trim()) {
diff --git a/packages/blade/src/components/ButtonGroup/StyledButtonGroup.tsx b/packages/blade/src/components/ButtonGroup/StyledButtonGroup.tsx
index 8a10b89ed4f..688c070eca4 100644
--- a/packages/blade/src/components/ButtonGroup/StyledButtonGroup.tsx
+++ b/packages/blade/src/components/ButtonGroup/StyledButtonGroup.tsx
@@ -2,33 +2,38 @@ import styled from 'styled-components';
 import type { StyledButtonGroupProps } from './types';
 import BaseBox from '~components/Box/BaseBox';
 import { makeBorderSize } from '~utils';
-import { getBackgroundColorToken } from '~components/Button/BaseButton/BaseButton';
-import getIn from '~utils/lodashButBetter/get';
 
 const StyledButtonGroup = styled(BaseBox)<StyledButtonGroupProps>(
-  ({ theme, isDisabled, variant = 'primary', color, isFullWidth }) => {
+  ({ theme, variant = 'primary', isFullWidth }) => {
     return {
       display: 'flex',
       width: isFullWidth ? '100%' : 'fit-content',
       borderWidth: makeBorderSize(theme.border.width.thin),
       borderRadius: makeBorderSize(theme.border.radius.medium),
       borderStyle: 'solid',
-      borderColor: getIn(
-        theme.colors,
-        getBackgroundColorToken({
-          // Only secondary variant has border a border, for other variants we use background color so that the border is not visible
-          property: variant === 'secondary' ? 'border' : 'background',
-          variant,
-          color,
-          state: isDisabled ? 'disabled' : 'default',
-        }),
-      ),
-
+      borderColor: 'transparent',
+      overflow: 'hidden',
       'button[role="button"]': {
-        borderRadius: 0,
-        border: 'none',
         flex: isFullWidth ? 1 : 'auto',
+        borderRadius: 0,
       },
+
+      ...(variant === 'secondary' && {
+        'button[role="button"]:first-child': {
+          borderRight: 'none',
+          borderTopLeftRadius: makeBorderSize(theme.border.radius.medium),
+          borderBottomLeftRadius: makeBorderSize(theme.border.radius.medium),
+        },
+        'button[role="button"]:not(:first-child):not(:last-child)': {
+          borderLeft: 'none',
+          borderRight: 'none',
+        },
+        'button[role="button"]:last-child': {
+          borderLeft: 'none',
+          borderTopRightRadius: makeBorderSize(theme.border.radius.medium),
+          borderBottomRightRadius: makeBorderSize(theme.border.radius.medium),
+        },
+      }),
     };
   },
 );
diff --git a/packages/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.ssr.test.tsx.snap b/packages/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.ssr.test.tsx.snap
index 71cd161bf20..4fa648bcbd5 100644
--- a/packages/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.ssr.test.tsx.snap
+++ b/packages/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ButtonGroup /> should render ButtonGroup 1`] = `"<div id="root"><div data-blade-component="button-group" data-testid="button-group-test" role="group" class="BaseBox-bmPWx StyledButtonGroup-gr4xbj-0  jpCXAr"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 iCiokj"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0  eHcfsa"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO eGcQGV" data-blade-component="base-text">One</div></div></div></button><div data-blade-component="base-box" class="BaseBox-bmPWx ButtonGroupweb__StyledDivider-sc-1lc1evg-0  cbYKkw"></div><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 iCiokj"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0  eHcfsa"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO eGcQGV" data-blade-component="base-text">Two</div></div></div></button><div data-blade-component="base-box" class="BaseBox-bmPWx ButtonGroupweb__StyledDivider-sc-1lc1evg-0  cbYKkw"></div><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 iCiokj"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0  eHcfsa"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO eGcQGV" data-blade-component="base-text">Three</div></div></div></button></div></div>"`;
+exports[`<ButtonGroup /> should render ButtonGroup 1`] = `"<div id="root"><div data-blade-component="button-group" data-testid="button-group-test" role="group" class="BaseBox-bmPWx StyledButtonGroup-gr4xbj-0  hxzFGp"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 iCiokj"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0  eHcfsa"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO eGcQGV" data-blade-component="base-text">One</div></div></div></button><div data-blade-component="base-box" class="BaseBox-bmPWx ButtonGroupweb__StyledDivider-sc-1lc1evg-0  cbYKkw"></div><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 iCiokj"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0  eHcfsa"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO eGcQGV" data-blade-component="base-text">Two</div></div></div></button><div data-blade-component="base-box" class="BaseBox-bmPWx ButtonGroupweb__StyledDivider-sc-1lc1evg-0  cbYKkw"></div><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 iCiokj"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0  eHcfsa"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO eGcQGV" data-blade-component="base-text">Three</div></div></div></button></div></div>"`;
 
 exports[`<ButtonGroup /> should render ButtonGroup 2`] = `
 .c3.c3.c3.c3.c3 {
@@ -25,6 +25,28 @@ exports[`<ButtonGroup /> should render ButtonGroup 2`] = `
   z-index: 1;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 36px;
   width: auto;
@@ -120,28 +142,6 @@ exports[`<ButtonGroup /> should render ButtonGroup 2`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(227,100%,59%,1);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;
diff --git a/packages/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.web.test.tsx.snap b/packages/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.web.test.tsx.snap
index 85746e7ad0e..b997ffe0cdd 100644
--- a/packages/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.web.test.tsx.snap
+++ b/packages/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.web.test.tsx.snap
@@ -23,6 +23,28 @@ exports[`<ButtonGroup /> should render ButtonGroup with default properties 1`] =
   z-index: 1;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 36px;
   width: auto;
@@ -118,28 +140,6 @@ exports[`<ButtonGroup /> should render ButtonGroup with default properties 1`] =
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(227,100%,59%,1);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;
@@ -281,6 +281,28 @@ exports[`<ButtonGroup /> should render ButtonGroup with dropdown 1`] = `
   position: relative;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 36px;
   width: auto;
@@ -376,28 +398,6 @@ exports[`<ButtonGroup /> should render ButtonGroup with dropdown 1`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(227,100%,59%,1);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c7.c7.c7.c7.c7 {
   border-width: 0;
   border-left-style: solid;
@@ -550,6 +550,26 @@ exports[`<ButtonGroup /> should render ButtonGroup with full width 1`] = `
   z-index: 1;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  border-radius: 0;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 36px;
   width: 100%;
@@ -645,26 +665,6 @@ exports[`<ButtonGroup /> should render ButtonGroup with full width 1`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(227,100%,59%,1);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;
@@ -785,6 +785,28 @@ exports[`<ButtonGroup /> should render ButtonGroup with large size 1`] = `
   z-index: 1;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 48px;
   width: auto;
@@ -880,28 +902,6 @@ exports[`<ButtonGroup /> should render ButtonGroup with large size 1`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(227,100%,59%,1);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;
@@ -1022,6 +1022,28 @@ exports[`<ButtonGroup /> should render ButtonGroup with medium size 1`] = `
   z-index: 1;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 36px;
   width: auto;
@@ -1117,28 +1139,6 @@ exports[`<ButtonGroup /> should render ButtonGroup with medium size 1`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(227,100%,59%,1);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;
@@ -1259,6 +1259,28 @@ exports[`<ButtonGroup /> should render ButtonGroup with small size 1`] = `
   z-index: 1;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 32px;
   width: auto;
@@ -1354,28 +1376,6 @@ exports[`<ButtonGroup /> should render ButtonGroup with small size 1`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(227,100%,59%,1);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;
@@ -1496,14 +1496,36 @@ exports[`<ButtonGroup /> should render ButtonGroup with xsmall size 1`] = `
   z-index: 1;
 }
 
-.c1.c1.c1.c1.c1 {
-  min-height: 28px;
-  width: auto;
-  cursor: pointer;
-  background-color: hsla(227,100%,59%,1);
-  border-color: hsla(227,100%,59%,1);
-  border-width: 0px;
-  border-radius: 4px;
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
+.c1.c1.c1.c1.c1 {
+  min-height: 28px;
+  width: auto;
+  cursor: pointer;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1591,28 +1613,6 @@ exports[`<ButtonGroup /> should render ButtonGroup with xsmall size 1`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(227,100%,59%,1);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;
@@ -1733,6 +1733,28 @@ exports[`<ButtonGroup /> should render disabled ButtonGroup 1`] = `
   z-index: 1;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 36px;
   width: auto;
@@ -1828,28 +1850,6 @@ exports[`<ButtonGroup /> should render disabled ButtonGroup 1`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(227,100%,59%,0.18);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;
@@ -3427,6 +3427,28 @@ exports[`<ButtonGroup /> should render negative color primary button 1`] = `
   z-index: 1;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 36px;
   width: auto;
@@ -3522,28 +3544,6 @@ exports[`<ButtonGroup /> should render negative color primary button 1`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(4,74%,49%,1);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;
@@ -3664,6 +3664,45 @@ exports[`<ButtonGroup /> should render negative color secondary button 1`] = `
   z-index: 1;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"]:first-child {
+  border-right: none;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"]:not(:first-child):not(:last-child) {
+  border-left: none;
+  border-right: none;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"]:last-child {
+  border-left: none;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 36px;
   width: auto;
@@ -3759,28 +3798,6 @@ exports[`<ButtonGroup /> should render negative color secondary button 1`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(4,74%,49%,1);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;
@@ -3901,6 +3918,28 @@ exports[`<ButtonGroup /> should render positive color primary button 1`] = `
   z-index: 1;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 36px;
   width: auto;
@@ -3996,28 +4035,6 @@ exports[`<ButtonGroup /> should render positive color primary button 1`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(150,100%,32%,1);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;
@@ -4138,6 +4155,45 @@ exports[`<ButtonGroup /> should render positive color secondary button 1`] = `
   z-index: 1;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"]:first-child {
+  border-right: none;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"]:not(:first-child):not(:last-child) {
+  border-left: none;
+  border-right: none;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"]:last-child {
+  border-left: none;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 36px;
   width: auto;
@@ -4233,28 +4289,6 @@ exports[`<ButtonGroup /> should render positive color secondary button 1`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(150,100%,32%,1);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;
@@ -4375,6 +4409,28 @@ exports[`<ButtonGroup /> should render primary color primary button 1`] = `
   z-index: 1;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 36px;
   width: auto;
@@ -4470,28 +4526,6 @@ exports[`<ButtonGroup /> should render primary color primary button 1`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(227,100%,59%,1);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;
@@ -4612,6 +4646,45 @@ exports[`<ButtonGroup /> should render primary color secondary button 1`] = `
   z-index: 1;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"]:first-child {
+  border-right: none;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"]:not(:first-child):not(:last-child) {
+  border-left: none;
+  border-right: none;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"]:last-child {
+  border-left: none;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 36px;
   width: auto;
@@ -4707,28 +4780,6 @@ exports[`<ButtonGroup /> should render primary color secondary button 1`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(227,100%,59%,1);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;
@@ -4849,6 +4900,28 @@ exports[`<ButtonGroup /> should render primary color tertiary button 1`] = `
   z-index: 1;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 36px;
   width: auto;
@@ -4944,28 +5017,6 @@ exports[`<ButtonGroup /> should render primary color tertiary button 1`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(211,20%,52%,0.12);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;
@@ -5086,6 +5137,28 @@ exports[`<ButtonGroup /> should render white color primary button 1`] = `
   z-index: 1;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 36px;
   width: auto;
@@ -5181,28 +5254,6 @@ exports[`<ButtonGroup /> should render white color primary button 1`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(0,0%,100%,1);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;
@@ -5323,6 +5374,45 @@ exports[`<ButtonGroup /> should render white color secondary button 1`] = `
   z-index: 1;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"]:first-child {
+  border-right: none;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"]:not(:first-child):not(:last-child) {
+  border-left: none;
+  border-right: none;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"]:last-child {
+  border-left: none;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 36px;
   width: auto;
@@ -5418,28 +5508,6 @@ exports[`<ButtonGroup /> should render white color secondary button 1`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(0,0%,100%,0.8);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;
@@ -5560,6 +5628,28 @@ exports[`<ButtonGroup /> should render white color tertiary button 1`] = `
   z-index: 1;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 36px;
   width: auto;
@@ -5655,28 +5745,6 @@ exports[`<ButtonGroup /> should render white color tertiary button 1`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(0,0%,100%,0.18);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;
diff --git a/packages/blade/src/components/ButtonGroup/docs/ButtonGroup.stories.tsx b/packages/blade/src/components/ButtonGroup/docs/ButtonGroup.stories.tsx
index bc833391dcc..6e745cdefd1 100644
--- a/packages/blade/src/components/ButtonGroup/docs/ButtonGroup.stories.tsx
+++ b/packages/blade/src/components/ButtonGroup/docs/ButtonGroup.stories.tsx
@@ -120,6 +120,29 @@ const ButtonGroupVariantsTemplate: StoryFn<typeof ButtonGroupComponent> = (args)
 export const AllVariants = ButtonGroupVariantsTemplate.bind({});
 AllVariants.storyName = 'All Variants';
 
+const ButtonGroupVariantsTemplateWithLoading: StoryFn<typeof ButtonGroupComponent> = (args) => {
+  const variants: ButtonGroupProps['variant'][] = ['primary', 'secondary', 'tertiary'];
+  return (
+    <>
+      {variants.map((variant) => (
+        <Box key={variant} marginBottom="spacing.8">
+          <Heading marginBottom="spacing.3">{variant}</Heading>
+          <ButtonGroupComponent {...args} variant={variant}>
+            <Button icon={RefreshIcon} isLoading>
+              Sync
+            </Button>
+            <Button icon={ShareIcon}>Share</Button>
+            <Button icon={DownloadIcon}>Download</Button>
+          </ButtonGroupComponent>
+        </Box>
+      ))}
+    </>
+  );
+};
+
+export const AllVariantsWithLoading = ButtonGroupVariantsTemplateWithLoading.bind({});
+AllVariantsWithLoading.storyName = 'All Variants With Loading';
+
 const ButtonGroupSizesTemplate: StoryFn<typeof ButtonGroupComponent> = (args) => {
   const sizes: ButtonGroupProps['size'][] = ['xsmall', 'small', 'medium', 'large'];
   return (
@@ -129,7 +152,9 @@ const ButtonGroupSizesTemplate: StoryFn<typeof ButtonGroupComponent> = (args) =>
           <Heading marginBottom="spacing.3">{size}</Heading>
           <ButtonGroupComponent {...args} size={size}>
             <Button icon={RefreshIcon}>Sync</Button>
-            <Button icon={ShareIcon}>Share</Button>
+            <Button isLoading icon={ShareIcon}>
+              Share
+            </Button>
             <Button icon={DownloadIcon}>Download</Button>
           </ButtonGroupComponent>
         </Box>