diff --git a/docs/pages/experiments/material/button-select.tsx b/docs/pages/experiments/material/button-select.tsx
new file mode 100644
index 00000000000000..654964f9c72db8
--- /dev/null
+++ b/docs/pages/experiments/material/button-select.tsx
@@ -0,0 +1,92 @@
+/* eslint-disable no-console */
+import * as React from 'react';
+import {
+  CssBaseline,
+  FormControlLabel,
+  Button as MaterialUIButton,
+  Experimental_CssVarsProvider as MaterialUICssVarsProvider,
+  Switch,
+  experimental_extendTheme as materialUIExtendTheme,
+} from '@mui/material';
+import { Stack } from '@mui/system';
+
+function createHandlers(name: string) {
+  return {
+    onClick: () => console.log(`${name} click`),
+  };
+}
+
+export default function App() {
+  const [disabled, setDisabled] = React.useState(false);
+
+  return (
+    <CssBaseline>
+      <MaterialUICssVarsProvider theme={materialUIExtendTheme({})}>
+        <Stack gap={12} alignItems="center" sx={{ my: 6 }}>
+          <Stack>
+            <FormControlLabel
+              control={<Switch checked={disabled} onChange={() => setDisabled((prev) => !prev)} />}
+              label="Toggle disabled"
+            />
+          </Stack>
+          <Stack direction="row" justifyContent="space-around" sx={{ width: '80vw' }}>
+            <Stack gap={3}>
+              <Stack alignItems="flex-start">
+                <span>Native button</span>
+                <button type="button" disabled={disabled} {...createHandlers('Native button')}>
+                  Button
+                </button>
+              </Stack>
+              <Stack alignItems="flex-start">
+                <span>Native anchor</span>
+                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                <a href="#" {...createHandlers('Native anchor')}>
+                  Anchor
+                </a>
+              </Stack>
+              <Stack alignItems="flex-start">
+                <span>Native div</span>
+                <div {...createHandlers('Div')}>Button</div>
+              </Stack>
+            </Stack>
+
+            <Stack gap={3}>
+              <Stack alignItems="flex-start">
+                <span>Material UI button</span>
+                <MaterialUIButton
+                  variant="contained"
+                  disabled={disabled}
+                  {...createHandlers('Material UI button')}
+                >
+                  Button
+                </MaterialUIButton>
+              </Stack>
+              <Stack alignItems="flex-start">
+                <span>Material UI button link</span>
+                <MaterialUIButton
+                  variant="contained"
+                  disabled={disabled}
+                  href="#"
+                  {...createHandlers('Material UI button link')}
+                >
+                  Button
+                </MaterialUIButton>
+              </Stack>
+              <Stack alignItems="flex-start">
+                <span>Material UI button as div</span>
+                <MaterialUIButton
+                  variant="contained"
+                  component="div"
+                  disabled={disabled}
+                  {...createHandlers('Material UI button as div')}
+                >
+                  Button
+                </MaterialUIButton>
+              </Stack>
+            </Stack>
+          </Stack>
+        </Stack>
+      </MaterialUICssVarsProvider>
+    </CssBaseline>
+  );
+}
diff --git a/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx b/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx
index de46813447ad93..a72bc6b1c45223 100644
--- a/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx
+++ b/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx
@@ -57,7 +57,13 @@ export const ButtonBaseRoot = styled('button', {
   borderRadius: 0,
   padding: 0, // Remove the padding in Firefox
   cursor: 'pointer',
-  userSelect: 'none',
+  // userSelect: 'text' to overcome Firefox's default behavior
+  userSelect: 'text',
+  // only apply userSelect: none when focused so
+  // selection from dragging from outside the element is possible
+  '&:focus': {
+    userSelect: 'none',
+  },
   verticalAlign: 'middle',
   MozAppearance: 'none', // Reset
   WebkitAppearance: 'none', // Reset
@@ -68,7 +74,7 @@ export const ButtonBaseRoot = styled('button', {
     borderStyle: 'none', // Remove Firefox dotted outline.
   },
   [`&.${buttonBaseClasses.disabled}`]: {
-    pointerEvents: 'none', // Disable link interactions
+    pointerEvents: 'none', // Disable interactions
     cursor: 'default',
   },
   '@media print': {
diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.js b/packages/mui-material/src/ButtonBase/ButtonBase.js
index 49366647405411..716d19ebbdb390 100644
--- a/packages/mui-material/src/ButtonBase/ButtonBase.js
+++ b/packages/mui-material/src/ButtonBase/ButtonBase.js
@@ -47,18 +47,24 @@ export const ButtonBaseRoot = styled('button', {
   borderRadius: 0,
   padding: 0, // Remove the padding in Firefox
   cursor: 'pointer',
-  userSelect: 'none',
   verticalAlign: 'middle',
   MozAppearance: 'none', // Reset
   WebkitAppearance: 'none', // Reset
   textDecoration: 'none',
   // So we take precedent over the style of a native <a /> element.
   color: 'inherit',
+  // userSelect: 'text' to overcome Firefox's default behavior
+  userSelect: 'text',
+  // Only apply userSelect: none when focused so
+  // selection from dragging from outside the element is possible
+  '&:focus': {
+    userSelect: 'none',
+  },
   '&::-moz-focus-inner': {
     borderStyle: 'none', // Remove Firefox dotted outline.
   },
   [`&.${buttonBaseClasses.disabled}`]: {
-    pointerEvents: 'none', // Disable link interactions
+    pointerEvents: 'none', // Disable interactions
     cursor: 'default',
   },
   '@media print': {
diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js
index bb685d348c2989..05718a131dea79 100644
--- a/packages/mui-material/src/Chip/Chip.js
+++ b/packages/mui-material/src/Chip/Chip.js
@@ -195,7 +195,6 @@ const ChipRoot = styled('div', {
   },
   ({ theme, ownerState }) => ({
     ...(ownerState.clickable && {
-      userSelect: 'none',
       WebkitTapHighlightColor: 'transparent',
       cursor: 'pointer',
       '&:hover': {
diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js
index b82aa6d5450efb..1dec7fcec1c262 100644
--- a/packages/mui-material/src/Link/Link.js
+++ b/packages/mui-material/src/Link/Link.js
@@ -60,6 +60,13 @@ const LinkRoot = styled(Typography, {
         textDecorationColor: 'inherit',
       },
     }),
+    // userSelect: 'text' to overcome Firefox's default behavior
+    userSelect: 'text',
+    // Only apply userSelect: none when focused so
+    // selection from dragging from outside the element is possible
+    '&:focus': {
+      userSelect: 'none',
+    },
     // Same reset as ButtonBase.root
     ...(ownerState.component === 'button' && {
       position: 'relative',
@@ -72,7 +79,6 @@ const LinkRoot = styled(Typography, {
       borderRadius: 0,
       padding: 0, // Remove the padding in Firefox
       cursor: 'pointer',
-      userSelect: 'none',
       verticalAlign: 'middle',
       MozAppearance: 'none', // Reset
       WebkitAppearance: 'none', // Reset