diff --git a/docs/data/material/components/toggle-button/SpacingToggleButton.js b/docs/data/material/components/toggle-button/SpacingToggleButton.js
new file mode 100644
index 00000000000000..35e2ba6123332d
--- /dev/null
+++ b/docs/data/material/components/toggle-button/SpacingToggleButton.js
@@ -0,0 +1,91 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+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 ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
+import ToggleButtonGroup, {
+  toggleButtonGroupClasses,
+} from '@mui/material/ToggleButtonGroup';
+
+function ButtonGroup({ gap, orientation }) {
+  const [alignment, setAlignment] = React.useState('left');
+
+  const handleAlignment = (event, newAlignment) => {
+    setAlignment(newAlignment);
+  };
+
+  return (
+    <ToggleButtonGroup
+      value={alignment}
+      exclusive
+      onChange={handleAlignment}
+      aria-label="text alignment"
+      orientation={orientation}
+      sx={(theme) => ({
+        gap,
+        ...(orientation === 'horizontal' && {
+          [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]:
+            {
+              borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
+              borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
+            },
+          [`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]:
+            {
+              borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+              borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+              borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`,
+            },
+          [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]:
+            {
+              borderLeft: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`,
+            },
+        }),
+        ...(orientation === 'vertical' && {
+          [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]:
+            {
+              borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
+              borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+            },
+          [`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]:
+            {
+              borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
+              borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+              borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
+            },
+          [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]:
+            {
+              borderTop: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`,
+            },
+        }),
+      })}
+    >
+      <ToggleButton value="left" aria-label="left aligned">
+        <FormatAlignLeftIcon />
+      </ToggleButton>
+      <ToggleButton value="center" aria-label="centered">
+        <FormatAlignCenterIcon />
+      </ToggleButton>
+      <ToggleButton value="right" aria-label="right aligned">
+        <FormatAlignRightIcon />
+      </ToggleButton>
+      <ToggleButton value="justify" aria-label="justified" disabled>
+        <FormatAlignJustifyIcon />
+      </ToggleButton>
+    </ToggleButtonGroup>
+  );
+}
+
+ButtonGroup.propTypes = {
+  gap: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
+};
+
+export default function SpacingToggleButton() {
+  return (
+    <div>
+      <ButtonGroup gap="2rem" orientation="horizontal" />
+    </div>
+  );
+}
diff --git a/docs/data/material/components/toggle-button/SpacingToggleButton.tsx b/docs/data/material/components/toggle-button/SpacingToggleButton.tsx
new file mode 100644
index 00000000000000..1e36e41cba831f
--- /dev/null
+++ b/docs/data/material/components/toggle-button/SpacingToggleButton.tsx
@@ -0,0 +1,94 @@
+import * as React from 'react';
+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 ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
+import ToggleButtonGroup, {
+  toggleButtonGroupClasses,
+} from '@mui/material/ToggleButtonGroup';
+
+function ButtonGroup({
+  gap,
+  orientation,
+}: {
+  gap: string | number;
+  orientation: 'horizontal' | 'vertical';
+}) {
+  const [alignment, setAlignment] = React.useState<string | null>('left');
+
+  const handleAlignment = (
+    event: React.MouseEvent<HTMLElement>,
+    newAlignment: string | null,
+  ) => {
+    setAlignment(newAlignment);
+  };
+
+  return (
+    <ToggleButtonGroup
+      value={alignment}
+      exclusive
+      onChange={handleAlignment}
+      aria-label="text alignment"
+      orientation={orientation}
+      sx={(theme) => ({
+        gap,
+        ...(orientation === 'horizontal' && {
+          [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]:
+            {
+              borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
+              borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
+            },
+          [`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]:
+            {
+              borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+              borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+              borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`,
+            },
+          [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]:
+            {
+              borderLeft: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`,
+            },
+        }),
+        ...(orientation === 'vertical' && {
+          [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]:
+            {
+              borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
+              borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+            },
+          [`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]:
+            {
+              borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
+              borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+              borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
+            },
+          [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]:
+            {
+              borderTop: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`,
+            },
+        }),
+      })}
+    >
+      <ToggleButton value="left" aria-label="left aligned">
+        <FormatAlignLeftIcon />
+      </ToggleButton>
+      <ToggleButton value="center" aria-label="centered">
+        <FormatAlignCenterIcon />
+      </ToggleButton>
+      <ToggleButton value="right" aria-label="right aligned">
+        <FormatAlignRightIcon />
+      </ToggleButton>
+      <ToggleButton value="justify" aria-label="justified" disabled>
+        <FormatAlignJustifyIcon />
+      </ToggleButton>
+    </ToggleButtonGroup>
+  );
+}
+
+export default function SpacingToggleButton() {
+  return (
+    <div>
+      <ButtonGroup gap="2rem" orientation="horizontal" />
+    </div>
+  );
+}
diff --git a/docs/data/material/components/toggle-button/SpacingToggleButton.tsx.preview b/docs/data/material/components/toggle-button/SpacingToggleButton.tsx.preview
new file mode 100644
index 00000000000000..9d3dde287bad90
--- /dev/null
+++ b/docs/data/material/components/toggle-button/SpacingToggleButton.tsx.preview
@@ -0,0 +1 @@
+<ButtonGroup gap="2rem" orientation="horizontal" />
\ No newline at end of file
diff --git a/docs/data/material/components/toggle-button/toggle-button.md b/docs/data/material/components/toggle-button/toggle-button.md
index 3dd7d233958903..f6c707382c7997 100644
--- a/docs/data/material/components/toggle-button/toggle-button.md
+++ b/docs/data/material/components/toggle-button/toggle-button.md
@@ -43,6 +43,12 @@ For larger or smaller buttons, use the `size` prop.
 
 {{"demo": "ColorToggleButton.js"}}
 
+## Spacing
+
+Adjust the spacing between toggle buttons using the `gap` prop.
+
+{{"demo": "SpacingToggleButton.js"}}
+
 ## Vertical buttons
 
 The buttons can be stacked vertically with the `orientation` prop set to "vertical".