diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json
index 32eb78e8966d16..aedc0b2125a9a7 100644
--- a/apps/pigment-css-next-app/package.json
+++ b/apps/pigment-css-next-app/package.json
@@ -12,6 +12,7 @@
     "@pigment-css/react": "workspace:^",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
+    "@mui/lab": "workspace:^",
     "@mui/material": "workspace:^",
     "@mui/system": "workspace:^",
     "@mui/material-nextjs": "workspace:^",
diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-button-group/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-button-group/page.tsx
new file mode 100644
index 00000000000000..73eeddd9668ec6
--- /dev/null
+++ b/apps/pigment-css-next-app/src/app/material-ui/react-button-group/page.tsx
@@ -0,0 +1,58 @@
+'use client';
+import * as React from 'react';
+import BasicButtonGroup from '../../../../../../docs/data/material/components/button-group/BasicButtonGroup';
+import DisableElevation from '../../../../../../docs/data/material/components/button-group/DisableElevation';
+import GroupOrientation from '../../../../../../docs/data/material/components/button-group/GroupOrientation';
+import GroupSizesColors from '../../../../../../docs/data/material/components/button-group/GroupSizesColors';
+import LoadingButtonGroup from '../../../../../../docs/data/material/components/button-group/LoadingButtonGroup';
+import SplitButton from '../../../../../../docs/data/material/components/button-group/SplitButton';
+import VariantButtonGroup from '../../../../../../docs/data/material/components/button-group/VariantButtonGroup';
+
+export default function ButtonGroup() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Basic Button Group</h2>
+        <div className="demo-container">
+          <BasicButtonGroup />
+        </div>
+      </section>
+      <section>
+        <h2> Disable Elevation</h2>
+        <div className="demo-container">
+          <DisableElevation />
+        </div>
+      </section>
+      <section>
+        <h2> Group Orientation</h2>
+        <div className="demo-container">
+          <GroupOrientation />
+        </div>
+      </section>
+      <section>
+        <h2> Group Sizes Colors</h2>
+        <div className="demo-container">
+          <GroupSizesColors />
+        </div>
+      </section>
+      <section>
+        <h2> Loading Button Group</h2>
+        <div className="demo-container">
+          <LoadingButtonGroup />
+        </div>
+      </section>
+      <section>
+        <h2> Split Button</h2>
+        <div className="demo-container">
+          <SplitButton />
+        </div>
+      </section>
+      <section>
+        <h2> Variant Button Group</h2>
+        <div className="demo-container">
+          <VariantButtonGroup />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}
diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json
index 144b6e3d2c92a7..649cbccadad4e6 100644
--- a/apps/pigment-css-vite-app/package.json
+++ b/apps/pigment-css-vite-app/package.json
@@ -12,6 +12,7 @@
     "@pigment-css/react": "workspace:^",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
+    "@mui/lab": "workspace:^",
     "@mui/material": "workspace:^",
     "@mui/system": "workspace:^",
     "@mui/icons-material": "workspace:^",
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-button-group.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-button-group.tsx
new file mode 100644
index 00000000000000..9c320eaeb63a15
--- /dev/null
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-button-group.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+import BasicButtonGroup from '../../../../../docs/data/material/components/button-group/BasicButtonGroup.tsx';
+import DisableElevation from '../../../../../docs/data/material/components/button-group/DisableElevation.tsx';
+import GroupOrientation from '../../../../../docs/data/material/components/button-group/GroupOrientation.tsx';
+import GroupSizesColors from '../../../../../docs/data/material/components/button-group/GroupSizesColors.tsx';
+import LoadingButtonGroup from '../../../../../docs/data/material/components/button-group/LoadingButtonGroup.tsx';
+import SplitButton from '../../../../../docs/data/material/components/button-group/SplitButton.tsx';
+import VariantButtonGroup from '../../../../../docs/data/material/components/button-group/VariantButtonGroup.tsx';
+
+export default function ButtonGroup() {
+  return (
+    <MaterialUILayout>
+      <h1>Button-group</h1>
+      <section>
+        <h2> Basic Button Group</h2>
+        <div className="demo-container">
+          <BasicButtonGroup />
+        </div>
+      </section>
+      <section>
+        <h2> Disable Elevation</h2>
+        <div className="demo-container">
+          <DisableElevation />
+        </div>
+      </section>
+      <section>
+        <h2> Group Orientation</h2>
+        <div className="demo-container">
+          <GroupOrientation />
+        </div>
+      </section>
+      <section>
+        <h2> Group Sizes Colors</h2>
+        <div className="demo-container">
+          <GroupSizesColors />
+        </div>
+      </section>
+      <section>
+        <h2> Loading Button Group</h2>
+        <div className="demo-container">
+          <LoadingButtonGroup />
+        </div>
+      </section>
+      <section>
+        <h2> Split Button</h2>
+        <div className="demo-container">
+          <SplitButton />
+        </div>
+      </section>
+      <section>
+        <h2> Variant Button Group</h2>
+        <div className="demo-container">
+          <VariantButtonGroup />
+        </div>
+      </section>
+    </MaterialUILayout>
+  );
+}
diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js
index 7153a43d09ded9..179dec4ae71074 100644
--- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js
+++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js
@@ -6,12 +6,13 @@ import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import getValidReactChildren from '@mui/utils/getValidReactChildren';
 import capitalize from '../utils/capitalize';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses';
 import ButtonGroupContext from './ButtonGroupContext';
 import ButtonGroupButtonContext from './ButtonGroupButtonContext';
 
+const useThemeProps = createUseThemeProps('MuiButtonGroup');
+
 const overridesResolver = (props, styles) => {
   const { ownerState } = props;
 
@@ -79,123 +80,169 @@ const ButtonGroupRoot = styled('div', {
   name: 'MuiButtonGroup',
   slot: 'Root',
   overridesResolver,
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
   display: 'inline-flex',
   borderRadius: (theme.vars || theme).shape.borderRadius,
-  ...(ownerState.variant === 'contained' && {
-    boxShadow: (theme.vars || theme).shadows[2],
-  }),
-  ...(ownerState.disableElevation && {
-    boxShadow: 'none',
-  }),
-  ...(ownerState.fullWidth && {
-    width: '100%',
-  }),
-  ...(ownerState.orientation === 'vertical' && {
-    flexDirection: 'column',
-  }),
-  [`& .${buttonGroupClasses.grouped}`]: {
-    minWidth: 40,
-    '&:hover': {
-      ...(ownerState.variant === 'contained' && {
+  variants: [
+    {
+      props: { variant: 'contained' },
+      style: {
+        boxShadow: (theme.vars || theme).shadows[2],
+      },
+    },
+    {
+      props: { disableElevation: true },
+      style: {
         boxShadow: 'none',
-      }),
+      },
     },
-    ...(ownerState.variant === 'contained' && {
-      boxShadow: 'none',
-    }),
-  },
-  [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
-    ...(ownerState.orientation === 'horizontal' && {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0,
-    }),
-    ...(ownerState.orientation === 'vertical' && {
-      borderBottomRightRadius: 0,
-      borderBottomLeftRadius: 0,
-    }),
-    ...(ownerState.variant === 'text' &&
-      ownerState.orientation === 'horizontal' && {
-        borderRight: theme.vars
-          ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)`
-          : `1px solid ${
-              theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
-            }`,
-        [`&.${buttonGroupClasses.disabled}`]: {
-          borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
+    {
+      props: { fullWidth: true },
+      style: {
+        width: '100%',
+      },
+    },
+    {
+      props: { orientation: 'vertical' },
+      style: {
+        flexDirection: 'column',
+        [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+          borderTopRightRadius: 0,
+          borderTopLeftRadius: 0,
         },
-      }),
-    ...(ownerState.variant === 'text' &&
-      ownerState.orientation === 'vertical' && {
-        borderBottom: theme.vars
-          ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)`
-          : `1px solid ${
-              theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
-            }`,
-        [`&.${buttonGroupClasses.disabled}`]: {
-          borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
+        [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+          borderBottomRightRadius: 0,
+          borderBottomLeftRadius: 0,
         },
-      }),
-    ...(ownerState.variant === 'text' &&
-      ownerState.color !== 'inherit' && {
-        borderColor: theme.vars
-          ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)`
-          : alpha(theme.palette[ownerState.color].main, 0.5),
-      }),
-    ...(ownerState.variant === 'outlined' &&
-      ownerState.orientation === 'horizontal' && {
-        borderRightColor: 'transparent',
-      }),
-    ...(ownerState.variant === 'outlined' &&
-      ownerState.orientation === 'vertical' && {
-        borderBottomColor: 'transparent',
-      }),
-    ...(ownerState.variant === 'contained' &&
-      ownerState.orientation === 'horizontal' && {
-        borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
-        [`&.${buttonGroupClasses.disabled}`]: {
-          borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
+      },
+    },
+    {
+      props: { orientation: 'horizontal' },
+      style: {
+        [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
         },
-      }),
-    ...(ownerState.variant === 'contained' &&
-      ownerState.orientation === 'vertical' && {
-        borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
-        [`&.${buttonGroupClasses.disabled}`]: {
-          borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
+        [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
         },
-      }),
-    ...(ownerState.variant === 'contained' &&
-      ownerState.color !== 'inherit' && {
-        borderColor: (theme.vars || theme).palette[ownerState.color].dark,
-      }),
-    '&:hover': {
-      ...(ownerState.variant === 'outlined' &&
-        ownerState.orientation === 'horizontal' && {
-          borderRightColor: 'currentColor',
-        }),
-      ...(ownerState.variant === 'outlined' &&
-        ownerState.orientation === 'vertical' && {
-          borderBottomColor: 'currentColor',
-        }),
+      },
+    },
+    {
+      props: { variant: 'text', orientation: 'horizontal' },
+      style: {
+        [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+          borderRight: theme.vars
+            ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)`
+            : `1px solid ${
+                theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
+              }`,
+          [`&.${buttonGroupClasses.disabled}`]: {
+            borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
+          },
+        },
+      },
+    },
+    {
+      props: { variant: 'text', orientation: 'vertical' },
+      style: {
+        [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+          borderBottom: theme.vars
+            ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)`
+            : `1px solid ${
+                theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
+              }`,
+          [`&.${buttonGroupClasses.disabled}`]: {
+            borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
+          },
+        },
+      },
+    },
+    ...Object.entries(theme.palette)
+      .filter(([, value]) => value.main)
+      .flatMap(([color]) => [
+        {
+          props: { variant: 'text', color },
+          style: {
+            [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+              borderColor: theme.vars
+                ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)`
+                : alpha(theme.palette[color].main, 0.5),
+            },
+          },
+        },
+      ]),
+    {
+      props: { variant: 'outlined', orientation: 'horizontal' },
+      style: {
+        [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+          borderRightColor: 'transparent',
+          '&:hover': {
+            borderRightColor: 'currentColor',
+          },
+        },
+        [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+          marginLeft: -1,
+        },
+      },
+    },
+    {
+      props: { variant: 'outlined', orientation: 'vertical' },
+      style: {
+        [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+          borderBottomColor: 'transparent',
+          '&:hover': {
+            borderBottomColor: 'currentColor',
+          },
+        },
+        [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+          marginTop: -1,
+        },
+      },
+    },
+    {
+      props: { variant: 'contained', orientation: 'horizontal' },
+      style: {
+        [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+          borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
+          [`&.${buttonGroupClasses.disabled}`]: {
+            borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
+          },
+        },
+      },
+    },
+    {
+      props: { variant: 'contained', orientation: 'vertical' },
+      style: {
+        [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+          borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
+          [`&.${buttonGroupClasses.disabled}`]: {
+            borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
+          },
+        },
+      },
+    },
+    ...Object.entries(theme.palette)
+      .filter(([, value]) => value.dark)
+      .map(([color]) => ({
+        props: { variant: 'contained', color },
+        style: {
+          [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+            borderColor: (theme.vars || theme).palette[color].dark,
+          },
+        },
+      })),
+  ],
+  [`& .${buttonGroupClasses.grouped}`]: {
+    minWidth: 40,
+    boxShadow: 'none',
+    props: { variant: 'contained' },
+    style: {
+      '&:hover': {
+        boxShadow: 'none',
+      },
     },
-  },
-  [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
-    ...(ownerState.orientation === 'horizontal' && {
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0,
-    }),
-    ...(ownerState.orientation === 'vertical' && {
-      borderTopRightRadius: 0,
-      borderTopLeftRadius: 0,
-    }),
-    ...(ownerState.variant === 'outlined' &&
-      ownerState.orientation === 'horizontal' && {
-        marginLeft: -1,
-      }),
-    ...(ownerState.variant === 'outlined' &&
-      ownerState.orientation === 'vertical' && {
-        marginTop: -1,
-      }),
   },
 }));
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ccdc319d95bb87..05602f7d0cfe08 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -371,6 +371,9 @@ importers:
       '@mui/icons-material':
         specifier: workspace:^
         version: link:../../packages/mui-icons-material/build
+      '@mui/lab':
+        specifier: workspace:^
+        version: link:../../packages/mui-lab/build
       '@mui/material':
         specifier: workspace:^
         version: link:../../packages/mui-material/build
@@ -426,6 +429,9 @@ importers:
       '@mui/icons-material':
         specifier: workspace:^
         version: link:../../packages/mui-icons-material/build
+      '@mui/lab':
+        specifier: workspace:^
+        version: link:../../packages/mui-lab/build
       '@mui/material':
         specifier: workspace:^
         version: link:../../packages/mui-material/build