From e9552bafbaa0b02f0d259c5c6b33fa0230881079 Mon Sep 17 00:00:00 2001
From: Chris Morin <longhumansbiz@gmail.com>
Date: Fri, 22 Sep 2023 11:18:51 -0300
Subject: [PATCH] button demos renamed

---
 .../system/index.js                           |  8 ++---
 .../system/index.tsx                          |  8 ++---
 .../system/index.tsx.preview                  |  4 +--
 .../tailwind/index.js                         | 12 +++----
 .../tailwind/index.tsx                        | 34 +++++++++---------
 .../tailwind/index.tsx.preview                |  4 +--
 .../button/UnstyledButtonsDisabledFocus.js    | 10 +++---
 .../button/UnstyledButtonsDisabledFocus.tsx   | 10 +++---
 .../UnstyledButtonsDisabledFocus.tsx.preview  |  6 ++--
 .../UnstyledButtonsDisabledFocusCustom.js     | 12 +++----
 .../UnstyledButtonsDisabledFocusCustom.tsx    | 16 +++++----
 ...yledButtonsDisabledFocusCustom.tsx.preview |  8 ++---
 .../UnstyledButtonsSimple/system/index.js     |  8 ++---
 .../UnstyledButtonsSimple/system/index.tsx    |  8 ++---
 .../system/index.tsx.preview                  |  4 +--
 .../UnstyledButtonsSimple/tailwind/index.js   | 14 ++++----
 .../UnstyledButtonsSimple/tailwind/index.tsx  | 36 +++++++++----------
 .../tailwind/index.tsx.preview                |  6 ++--
 .../components/button/UnstyledButtonsSpan.js  | 10 +++---
 .../components/button/UnstyledButtonsSpan.tsx | 14 +++++---
 .../button/UnstyledButtonsSpan.tsx.preview    |  6 ++--
 .../components/button/UnstyledLinkButton.js   |  8 ++---
 .../components/button/UnstyledLinkButton.tsx  |  8 ++---
 .../button/UnstyledLinkButton.tsx.preview     |  4 +--
 24 files changed, 128 insertions(+), 130 deletions(-)

diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js
index 49175792bc2e54..b16483005ffd01 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js
@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsIntroduction() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton>Button</CustomButton>
-      <CustomButton disabled>Disabled</CustomButton>
+      <Button>Button</Button>
+      <Button disabled>Disabled</Button>
     </Stack>
   );
 }
@@ -24,7 +24,7 @@ const grey = {
   900: '#24292f',
 };
 
-const CustomButton = styled(Button)(
+const Button = styled(BaseButton)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-weight: 600;
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx
index 49175792bc2e54..b16483005ffd01 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsIntroduction() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton>Button</CustomButton>
-      <CustomButton disabled>Disabled</CustomButton>
+      <Button>Button</Button>
+      <Button disabled>Disabled</Button>
     </Stack>
   );
 }
@@ -24,7 +24,7 @@ const grey = {
   900: '#24292f',
 };
 
-const CustomButton = styled(Button)(
+const Button = styled(BaseButton)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-weight: 600;
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx.preview
index 702ae5216245c1..b7b5add52ab6c2 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx.preview
@@ -1,2 +1,2 @@
-<CustomButton>Button</CustomButton>
-<CustomButton disabled>Disabled</CustomButton>
\ No newline at end of file
+<Button>Button</Button>
+<Button disabled>Disabled</Button>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js
index 3afdd444109f23..f887ed0d501825 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js
@@ -1,22 +1,22 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@mui/base/Button';
+import { Button as BaseButton } from '@mui/base/Button';
 import Stack from '@mui/material/Stack';
 import clsx from 'clsx';
 
 export default function UnstyledButtonsIntroduction() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton>Button</CustomButton>
-      <CustomButton disabled>Disabled</CustomButton>
+      <Button>Button</Button>
+      <Button disabled>Disabled</Button>
     </Stack>
   );
 }
 
-const CustomButton = React.forwardRef((props, ref) => {
+const Button = React.forwardRef((props, ref) => {
   const { className, ...other } = props;
   return (
-    <Button
+    <BaseButton
       ref={ref}
       className={clsx(
         'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
@@ -27,6 +27,6 @@ const CustomButton = React.forwardRef((props, ref) => {
   );
 });
 
-CustomButton.propTypes = {
+Button.propTypes = {
   className: PropTypes.string,
 };
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx
index 7bc50e32c49739..d92fffecf769c0 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx
@@ -1,29 +1,27 @@
 import * as React from 'react';
-import { Button, ButtonProps } from '@mui/base/Button';
+import { Button as BaseButton, ButtonProps } from '@mui/base/Button';
 import Stack from '@mui/material/Stack';
 import clsx from 'clsx';
 
 export default function UnstyledButtonsIntroduction() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton>Button</CustomButton>
-      <CustomButton disabled>Disabled</CustomButton>
+      <Button>Button</Button>
+      <Button disabled>Disabled</Button>
     </Stack>
   );
 }
 
-const CustomButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    const { className, ...other } = props;
-    return (
-      <Button
-        ref={ref}
-        className={clsx(
-          'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
-          className,
-        )}
-        {...other}
-      />
-    );
-  },
-);
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { className, ...other } = props;
+  return (
+    <BaseButton
+      ref={ref}
+      className={clsx(
+        'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
+        className,
+      )}
+      {...other}
+    />
+  );
+});
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx.preview
index 702ae5216245c1..b7b5add52ab6c2 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx.preview
@@ -1,2 +1,2 @@
-<CustomButton>Button</CustomButton>
-<CustomButton disabled>Disabled</CustomButton>
\ No newline at end of file
+<Button>Button</Button>
+<Button disabled>Disabled</Button>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
index 81c3db1e383492..0171d48acef2cb 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsDisabledFocus() {
   return (
     <Stack spacing={2}>
-      <CustomButton disabled>focusableWhenDisabled = false</CustomButton>
-      <CustomButton disabled focusableWhenDisabled>
+      <Button disabled>focusableWhenDisabled = false</Button>
+      <Button disabled focusableWhenDisabled>
         focusableWhenDisabled = true
-      </CustomButton>
+      </Button>
     </Stack>
   );
 }
@@ -20,7 +20,7 @@ const blue = {
   700: '#0059B2',
 };
 
-const CustomButton = styled(Button)`
+const Button = styled(BaseButton)`
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
index 81c3db1e383492..0171d48acef2cb 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsDisabledFocus() {
   return (
     <Stack spacing={2}>
-      <CustomButton disabled>focusableWhenDisabled = false</CustomButton>
-      <CustomButton disabled focusableWhenDisabled>
+      <Button disabled>focusableWhenDisabled = false</Button>
+      <Button disabled focusableWhenDisabled>
         focusableWhenDisabled = true
-      </CustomButton>
+      </Button>
     </Stack>
   );
 }
@@ -20,7 +20,7 @@ const blue = {
   700: '#0059B2',
 };
 
-const CustomButton = styled(Button)`
+const Button = styled(BaseButton)`
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx.preview b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx.preview
index 1542c3355640a0..28ea0e4f494e55 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx.preview
@@ -1,4 +1,4 @@
-<CustomButton disabled>focusableWhenDisabled = false</CustomButton>
-<CustomButton disabled focusableWhenDisabled>
+<Button disabled>focusableWhenDisabled = false</Button>
+<Button disabled focusableWhenDisabled>
   focusableWhenDisabled = true
-</CustomButton>
\ No newline at end of file
+</Button>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
index 29eb4906c0d8a1..c62571925fe9cb 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
@@ -1,17 +1,17 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsDisabledFocusCustom() {
   return (
     <Stack spacing={2}>
-      <CustomButton slots={{ root: 'span' }} disabled>
+      <Button slots={{ root: 'span' }} disabled>
         focusableWhenDisabled = false
-      </CustomButton>
-      <CustomButton slots={{ root: 'span' }} disabled focusableWhenDisabled>
+      </Button>
+      <Button slots={{ root: 'span' }} disabled focusableWhenDisabled>
         focusableWhenDisabled = true
-      </CustomButton>
+      </Button>
     </Stack>
   );
 }
@@ -22,7 +22,7 @@ const blue = {
   700: '#0059B2',
 };
 
-const CustomButton = styled(Button)`
+const Button = styled(BaseButton)`
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
index d1e1b7eff13a85..0c75b3d74b92d2 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
@@ -1,5 +1,9 @@
 import * as React from 'react';
-import { Button, buttonClasses, ButtonTypeMap } from '@mui/base/Button';
+import {
+  Button as BaseButton,
+  buttonClasses,
+  ButtonTypeMap,
+} from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 import { PolymorphicComponent } from '@mui/base/utils';
@@ -7,12 +11,12 @@ import { PolymorphicComponent } from '@mui/base/utils';
 export default function UnstyledButtonsDisabledFocusCustom() {
   return (
     <Stack spacing={2}>
-      <CustomButton slots={{ root: 'span' }} disabled>
+      <Button slots={{ root: 'span' }} disabled>
         focusableWhenDisabled = false
-      </CustomButton>
-      <CustomButton slots={{ root: 'span' }} disabled focusableWhenDisabled>
+      </Button>
+      <Button slots={{ root: 'span' }} disabled focusableWhenDisabled>
         focusableWhenDisabled = true
-      </CustomButton>
+      </Button>
     </Stack>
   );
 }
@@ -23,7 +27,7 @@ const blue = {
   700: '#0059B2',
 };
 
-const CustomButton = styled(Button)`
+const Button = styled(BaseButton)`
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx.preview b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx.preview
index ea5b0163da93f7..0cd36adb01d5a1 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx.preview
@@ -1,6 +1,6 @@
-<CustomButton slots={{ root: 'span' }} disabled>
+<Button slots={{ root: 'span' }} disabled>
   focusableWhenDisabled = false
-</CustomButton>
-<CustomButton slots={{ root: 'span' }} disabled focusableWhenDisabled>
+</Button>
+<Button slots={{ root: 'span' }} disabled focusableWhenDisabled>
   focusableWhenDisabled = true
-</CustomButton>
\ No newline at end of file
+</Button>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.js b/docs/data/base/components/button/UnstyledButtonsSimple/system/index.js
index 69d470d99c3198..de8dc38e8101d4 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.js
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/system/index.js
@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsSimple() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton>Button</CustomButton>
-      <CustomButton disabled>Disabled</CustomButton>
+      <Button>Button</Button>
+      <Button disabled>Disabled</Button>
     </Stack>
   );
 }
@@ -18,7 +18,7 @@ const blue = {
   700: '#0059B2',
 };
 
-const CustomButton = styled(Button)`
+const Button = styled(BaseButton)`
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx b/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx
index 69d470d99c3198..de8dc38e8101d4 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsSimple() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton>Button</CustomButton>
-      <CustomButton disabled>Disabled</CustomButton>
+      <Button>Button</Button>
+      <Button disabled>Disabled</Button>
     </Stack>
   );
 }
@@ -18,7 +18,7 @@ const blue = {
   700: '#0059B2',
 };
 
-const CustomButton = styled(Button)`
+const Button = styled(BaseButton)`
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx.preview
index 702ae5216245c1..b7b5add52ab6c2 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx.preview
@@ -1,2 +1,2 @@
-<CustomButton>Button</CustomButton>
-<CustomButton disabled>Disabled</CustomButton>
\ No newline at end of file
+<Button>Button</Button>
+<Button disabled>Disabled</Button>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js
index 917ebda0a7b6f9..1339ee876c8f34 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js
@@ -1,24 +1,22 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@mui/base/Button';
+import { Button as BaseButton } from '@mui/base/Button';
 import Stack from '@mui/material/Stack';
 import clsx from 'clsx';
 
 export default function UnstyledButtonsSimple() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton className="hover:bg-violet-600 active:bg-violet-700">
-        Button
-      </CustomButton>
-      <CustomButton disabled>Disabled</CustomButton>
+      <Button className="hover:bg-violet-600 active:bg-violet-700">Button</Button>
+      <Button disabled>Disabled</Button>
     </Stack>
   );
 }
 
-const CustomButton = React.forwardRef((props, ref) => {
+const Button = React.forwardRef((props, ref) => {
   const { className, ...other } = props;
   return (
-    <Button
+    <BaseButton
       ref={ref}
       className={clsx(
         'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
@@ -29,6 +27,6 @@ const CustomButton = React.forwardRef((props, ref) => {
   );
 });
 
-CustomButton.propTypes = {
+Button.propTypes = {
   className: PropTypes.string,
 };
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx
index 15f3ee6511736b..16e2d86ba2b877 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx
@@ -1,31 +1,27 @@
 import * as React from 'react';
-import { Button, ButtonProps } from '@mui/base/Button';
+import { Button as BaseButton, ButtonProps } from '@mui/base/Button';
 import Stack from '@mui/material/Stack';
 import clsx from 'clsx';
 
 export default function UnstyledButtonsSimple() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton className="hover:bg-violet-600 active:bg-violet-700">
-        Button
-      </CustomButton>
-      <CustomButton disabled>Disabled</CustomButton>
+      <Button className="hover:bg-violet-600 active:bg-violet-700">Button</Button>
+      <Button disabled>Disabled</Button>
     </Stack>
   );
 }
 
-const CustomButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    const { className, ...other } = props;
-    return (
-      <Button
-        ref={ref}
-        className={clsx(
-          'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
-          className,
-        )}
-        {...other}
-      />
-    );
-  },
-);
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { className, ...other } = props;
+  return (
+    <BaseButton
+      ref={ref}
+      className={clsx(
+        'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
+        className,
+      )}
+      {...other}
+    />
+  );
+});
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview
index 87d6569283c61f..d96ba614272a34 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview
@@ -1,4 +1,2 @@
-<CustomButton className="hover:bg-violet-600 active:bg-violet-700">
-  Button
-</CustomButton>
-<CustomButton disabled>Disabled</CustomButton>
\ No newline at end of file
+<Button className="hover:bg-violet-600 active:bg-violet-700">Button</Button>
+<Button disabled>Disabled</Button>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.js b/docs/data/base/components/button/UnstyledButtonsSpan.js
index 45dd963617f567..e4933ae60abfac 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.js
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.js
@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsSpan() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton slots={{ root: 'span' }}>Button</CustomButton>
-      <CustomButton slots={{ root: 'span' }} disabled>
+      <Button slots={{ root: 'span' }}>Button</Button>
+      <Button slots={{ root: 'span' }} disabled>
         Disabled
-      </CustomButton>
+      </Button>
     </Stack>
   );
 }
@@ -20,7 +20,7 @@ const blue = {
   700: '#0059B2',
 };
 
-const CustomButton = styled(Button)`
+const Button = styled(BaseButton)`
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.tsx b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
index 28456f29f69b20..fb788475dc3a32 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
@@ -1,5 +1,9 @@
 import * as React from 'react';
-import { Button, buttonClasses, ButtonTypeMap } from '@mui/base/Button';
+import {
+  Button as BaseButton,
+  buttonClasses,
+  ButtonTypeMap,
+} from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 import { PolymorphicComponent } from '@mui/base/utils';
@@ -7,10 +11,10 @@ import { PolymorphicComponent } from '@mui/base/utils';
 export default function UnstyledButtonsSpan() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton slots={{ root: 'span' }}>Button</CustomButton>
-      <CustomButton slots={{ root: 'span' }} disabled>
+      <Button slots={{ root: 'span' }}>Button</Button>
+      <Button slots={{ root: 'span' }} disabled>
         Disabled
-      </CustomButton>
+      </Button>
     </Stack>
   );
 }
@@ -21,7 +25,7 @@ const blue = {
   700: '#0059B2',
 };
 
-const CustomButton = styled(Button)`
+const Button = styled(BaseButton)`
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview
index c38f8399833ef2..3a8d9ed0ae21de 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview
@@ -1,4 +1,4 @@
-<CustomButton slots={{ root: 'span' }}>Button</CustomButton>
-<CustomButton slots={{ root: 'span' }} disabled>
+<Button slots={{ root: 'span' }}>Button</Button>
+<Button slots={{ root: 'span' }} disabled>
   Disabled
-</CustomButton>
\ No newline at end of file
+</Button>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledLinkButton.js b/docs/data/base/components/button/UnstyledLinkButton.js
index aef8f238b46b07..ddddc49946132c 100644
--- a/docs/data/base/components/button/UnstyledLinkButton.js
+++ b/docs/data/base/components/button/UnstyledLinkButton.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 import Link from 'next/link';
@@ -7,9 +7,9 @@ import Link from 'next/link';
 export default function UnstyledLinkButton() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton href={'https://mui.com/'}>Standard link</CustomButton>
+      <Button href={'https://mui.com/'}>Standard link</Button>
       <Link href={'https://mui.com/'}>
-        <CustomButton>Next link</CustomButton>
+        <Button>Next link</Button>
       </Link>
     </Stack>
   );
@@ -27,7 +27,7 @@ const grey = {
   900: '#24292f',
 };
 
-const CustomButton = styled(Button)(
+const Button = styled(BaseButton)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-weight: bold;
diff --git a/docs/data/base/components/button/UnstyledLinkButton.tsx b/docs/data/base/components/button/UnstyledLinkButton.tsx
index aef8f238b46b07..ddddc49946132c 100644
--- a/docs/data/base/components/button/UnstyledLinkButton.tsx
+++ b/docs/data/base/components/button/UnstyledLinkButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 import Link from 'next/link';
@@ -7,9 +7,9 @@ import Link from 'next/link';
 export default function UnstyledLinkButton() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton href={'https://mui.com/'}>Standard link</CustomButton>
+      <Button href={'https://mui.com/'}>Standard link</Button>
       <Link href={'https://mui.com/'}>
-        <CustomButton>Next link</CustomButton>
+        <Button>Next link</Button>
       </Link>
     </Stack>
   );
@@ -27,7 +27,7 @@ const grey = {
   900: '#24292f',
 };
 
-const CustomButton = styled(Button)(
+const Button = styled(BaseButton)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-weight: bold;
diff --git a/docs/data/base/components/button/UnstyledLinkButton.tsx.preview b/docs/data/base/components/button/UnstyledLinkButton.tsx.preview
index 9c0010de1b136a..b2a4b57c531af4 100644
--- a/docs/data/base/components/button/UnstyledLinkButton.tsx.preview
+++ b/docs/data/base/components/button/UnstyledLinkButton.tsx.preview
@@ -1,4 +1,4 @@
-<CustomButton href={'https://mui.com/'}>Standard link</CustomButton>
+<Button href={'https://mui.com/'}>Standard link</Button>
 <Link href={'https://mui.com/'}>
-  <CustomButton>Next link</CustomButton>
+  <Button>Next link</Button>
 </Link>
\ No newline at end of file