diff --git a/docs/data/material/components/toggle-button/ToggleButtonSizes.js b/docs/data/material/components/toggle-button/ToggleButtonSizes.js
index 53182613d564be..764e2f006f4444 100644
--- a/docs/data/material/components/toggle-button/ToggleButtonSizes.js
+++ b/docs/data/material/components/toggle-button/ToggleButtonSizes.js
@@ -3,7 +3,7 @@ import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
 import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
 import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
 import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 
@@ -36,15 +36,7 @@ export default function ToggleButtonSizes() {
   };
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        // TODO Replace with Stack
-        '& > :not(style) + :not(style)': { mt: 2 },
-      }}
-    >
+    <Stack spacing={2} alignItems="center">
       <ToggleButtonGroup size="small" {...control} aria-label="Small sizes">
         {children}
       </ToggleButtonGroup>
@@ -54,6 +46,6 @@ export default function ToggleButtonSizes() {
       <ToggleButtonGroup size="large" {...control} aria-label="Large sizes">
         {children}
       </ToggleButtonGroup>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx b/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx
index 2bd6ce21788c87..63e2c5627799c9 100644
--- a/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx
+++ b/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx
@@ -3,7 +3,7 @@ import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
 import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
 import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
 import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 
@@ -39,15 +39,7 @@ export default function ToggleButtonSizes() {
   };
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        // TODO Replace with Stack
-        '& > :not(style) + :not(style)': { mt: 2 },
-      }}
-    >
+    <Stack spacing={2} alignItems="center">
       <ToggleButtonGroup size="small" {...control} aria-label="Small sizes">
         {children}
       </ToggleButtonGroup>
@@ -57,6 +49,6 @@ export default function ToggleButtonSizes() {
       <ToggleButtonGroup size="large" {...control} aria-label="Large sizes">
         {children}
       </ToggleButtonGroup>
-    </Box>
+    </Stack>
   );
 }