diff --git a/docs/data/base/components/button/UnstyledButtonCustom.js b/docs/data/base/components/button/UnstyledButtonCustom.js
index ec343d488f0ff3..629ed5a0f2d9f2 100644
--- a/docs/data/base/components/button/UnstyledButtonCustom.js
+++ b/docs/data/base/components/button/UnstyledButtonCustom.js
@@ -22,7 +22,7 @@ ButtonRoot.propTypes = {
 };
 
 const SvgButton = React.forwardRef(function SvgButton(props, ref) {
-  return <Button {...props} component={CustomButtonRoot} ref={ref} />;
+  return <Button {...props} slots={{ root: CustomButtonRoot }} ref={ref} />;
 });
 
 export default function UnstyledButtonCustom() {
diff --git a/docs/data/base/components/button/UnstyledButtonCustom.tsx b/docs/data/base/components/button/UnstyledButtonCustom.tsx
index e5cfd5aa651254..7da614321c1c94 100644
--- a/docs/data/base/components/button/UnstyledButtonCustom.tsx
+++ b/docs/data/base/components/button/UnstyledButtonCustom.tsx
@@ -23,7 +23,7 @@ const SvgButton = React.forwardRef(function SvgButton(
   props: ButtonProps,
   ref: React.ForwardedRef<any>,
 ) {
-  return <Button {...props} component={CustomButtonRoot} ref={ref} />;
+  return <Button {...props} slots={{ root: CustomButtonRoot }} ref={ref} />;
 });
 
 export default function UnstyledButtonCustom() {
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
index 13357df617cd5c..c31182973b1f31 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
@@ -6,10 +6,10 @@ import Stack from '@mui/material/Stack';
 export default function UnstyledButtonsDisabledFocusCustom() {
   return (
     <Stack spacing={2}>
-      <CustomButton component="span" disabled>
+      <CustomButton slots={{ root: 'span' }} disabled>
         focusableWhenDisabled = false
       </CustomButton>
-      <CustomButton component="span" disabled focusableWhenDisabled>
+      <CustomButton slots={{ root: 'span' }} disabled focusableWhenDisabled>
         focusableWhenDisabled = true
       </CustomButton>
     </Stack>
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
index 023993fc6f5f3c..a343eccad52078 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
@@ -2,15 +2,15 @@ import * as React from 'react';
 import Button, { buttonClasses, ButtonTypeMap } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '@mui/base/utils';
 
 export default function UnstyledButtonsDisabledFocusCustom() {
   return (
     <Stack spacing={2}>
-      <CustomButton component="span" disabled>
+      <CustomButton slots={{ root: 'span' }} disabled>
         focusableWhenDisabled = false
       </CustomButton>
-      <CustomButton component="span" disabled focusableWhenDisabled>
+      <CustomButton slots={{ root: 'span' }} disabled focusableWhenDisabled>
         focusableWhenDisabled = true
       </CustomButton>
     </Stack>
@@ -52,4 +52,4 @@ const CustomButton = styled(Button)`
     opacity: 0.5;
     cursor: not-allowed;
   }
-` as OverridableComponent<ButtonTypeMap>;
+` as PolymorphicComponent<ButtonTypeMap>;
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx.preview b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx.preview
index 6c68795155388b..ea5b0163da93f7 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx.preview
@@ -1,6 +1,6 @@
-<CustomButton component="span" disabled>
+<CustomButton slots={{ root: 'span' }} disabled>
   focusableWhenDisabled = false
 </CustomButton>
-<CustomButton component="span" disabled focusableWhenDisabled>
+<CustomButton slots={{ root: 'span' }} disabled focusableWhenDisabled>
   focusableWhenDisabled = true
 </CustomButton>
\ 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 49e2d1dfcc4cd4..fe81cec1cb86ed 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.js
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.js
@@ -6,8 +6,8 @@ import Stack from '@mui/material/Stack';
 export default function UnstyledButtonsSpan() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton component="span">Button</CustomButton>
-      <CustomButton component="span" disabled>
+      <CustomButton slots={{ root: 'span' }}>Button</CustomButton>
+      <CustomButton slots={{ root: 'span' }} disabled>
         Disabled
       </CustomButton>
     </Stack>
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.tsx b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
index b22aeae6f108cb..deac7b4edd7d57 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
@@ -2,13 +2,13 @@ import * as React from 'react';
 import Button, { buttonClasses, ButtonTypeMap } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '@mui/base/utils';
 
 export default function UnstyledButtonsSpan() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton component="span">Button</CustomButton>
-      <CustomButton component="span" disabled>
+      <CustomButton slots={{ root: 'span' }}>Button</CustomButton>
+      <CustomButton slots={{ root: 'span' }} disabled>
         Disabled
       </CustomButton>
     </Stack>
@@ -50,4 +50,4 @@ const CustomButton = styled(Button)`
     opacity: 0.5;
     cursor: not-allowed;
   }
-` as OverridableComponent<ButtonTypeMap>;
+` as PolymorphicComponent<ButtonTypeMap>;
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview
index 456f8c68ebbaf6..c38f8399833ef2 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview
@@ -1,4 +1,4 @@
-<CustomButton component="span">Button</CustomButton>
-<CustomButton component="span" disabled>
+<CustomButton slots={{ root: 'span' }}>Button</CustomButton>
+<CustomButton slots={{ root: 'span' }} disabled>
   Disabled
 </CustomButton>
\ No newline at end of file
diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
index c2d7609ad41d31..f8247cbdff004a 100644
--- a/docs/data/base/components/button/button.md
+++ b/docs/data/base/components/button/button.md
@@ -54,19 +54,19 @@ The Button component is composed of a root `<button>` slot with no interior slot
 </button>
 ```
 
-### Slot props
+### Custom structure
 
-:::info
-The following props are available on all non-utility Base components.
-See [Usage](/base/getting-started/usage/) for full details.
-:::
-
-Use the `component` prop to override the root slot with a custom element:
+Use the `slots.root` prop to override the root slot with a custom element:
 
 ```jsx
-<Button component="div" />
+<Button slots={{ root: 'div' }} />
 ```
 
+:::info
+The `slots` prop is available on all non-utility Base components.
+See [Overriding component structure](/base/guides/overriding-component-structure/) for full details.
+:::
+
 If you provide a non-interactive element such as a `<span>`, the Button component will automatically add the necessary accessibility attributes.
 
 Compare the attributes on the `<span>` in this demo with the Button from the previous demo—try inspecting them both with your browser's dev tools:
@@ -74,10 +74,24 @@ Compare the attributes on the `<span>` in this demo with the Button from the pre
 {{"demo": "UnstyledButtonsSpan.js"}}
 
 :::warning
-If a Button is customized with a non-button element (i.e. `<Button component="span" />`), it will not submit the form it's in when clicked.
-Similarly, `<Button component="span" type="reset">` will not reset its parent form.
+If a Button is customized with a non-button element (for instance, `<Button slots={{ root: "span" }} />`), it will not submit the form it's in when clicked.
+Similarly, `<Button slots={{ root: "span" }} type="reset">` will not reset its parent form.
 :::
 
+#### Usage with TypeScript
+
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic to the unstyled component. This way, you can safely provide the custom compoenent's props directly on the compnent:
+
+```tsx
+<Button<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<Button<'img'> slots={{ root: 'img' }} src="button.png" />
+```
+
 ## Hook
 
 ```js
diff --git a/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.js b/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.js
index c3d68ca7a78238..bd3fe646922256 100644
--- a/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.js
+++ b/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.js
@@ -2,5 +2,5 @@ import * as React from 'react';
 import Button from '@mui/base/Button';
 
 export default function DivButton() {
-  return <Button component="div">Button</Button>;
+  return <Button slots={{ root: 'div' }}>Button</Button>;
 }
diff --git a/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx b/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx
index c3d68ca7a78238..bd3fe646922256 100644
--- a/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx
+++ b/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx
@@ -2,5 +2,5 @@ import * as React from 'react';
 import Button from '@mui/base/Button';
 
 export default function DivButton() {
-  return <Button component="div">Button</Button>;
+  return <Button slots={{ root: 'div' }}>Button</Button>;
 }
diff --git a/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx.preview b/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx.preview
index 1a3d44bd97a2fa..d8e8070585ac6a 100644
--- a/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx.preview
+++ b/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx.preview
@@ -1 +1 @@
-<Button component="div">Button</Button>
\ No newline at end of file
+<Button slots={{ root: 'div' }}>Button</Button>
\ No newline at end of file
diff --git a/docs/data/base/guides/overriding-component-structure/overriding-component-structure.md b/docs/data/base/guides/overriding-component-structure/overriding-component-structure.md
index b66a5d9097831c..5916e885da5b0a 100644
--- a/docs/data/base/guides/overriding-component-structure/overriding-component-structure.md
+++ b/docs/data/base/guides/overriding-component-structure/overriding-component-structure.md
@@ -13,12 +13,9 @@ Slots are most commonly filled by HTML tags, but may also be filled by React com
 
 All components contain a root slot that defines their primary node in the DOM tree; more complex components also contain additional interior slots named after the elements they represent.
 
-All _non-utility_ Base UI components accept two props for overriding their rendered HTML structure:
+All _non-utility_ Base UI components accept [the `slots` prop](#the-slots-prop) for overriding their rendered HTML structure.
 
-- `component`—to override the root slot
-- `slots`—to override any interior slots (when present) as well as the root
-
-Additionally, you can pass custom props to interior slots using `slotProps`.
+Additionally, you can pass custom props to [interior slots](#interior-slots) using `slotProps`.
 
 ## The root slot
 
@@ -26,19 +23,7 @@ The root slot represents the component's outermost element.
 For simpler components, the root slot is often filled by the native HTML element that the component is intended to replace.
 
 For example, the [Button's](/base/react-button/) root slot is a `<button>` element.
-This component _only_ has a root slot; more complex components may have additional [interior slots](#interior-slots).
-
-### The component prop
-
-Use the `component` prop to override a component's root slot.
-The demo below shows how to replace the Button's `<button>` tag with a `<div>`:
-
-{{"demo": "OverridingRootSlot.js"}}
-
-:::success
-If you provide a non-interactive element like a `<div>` or a `<span>`, the Button will automatically add the necessary accessibility attributes.
-Try inspecting the demo Button above in your browser's dev tools to see this feature in action.
-:::
+This component _only_ has a root slot; more complex components may have additional interior slots.
 
 ## Interior slots
 
@@ -49,37 +34,17 @@ For example, the [Slider](/base/react-slider/) is composed of a root `<span>` th
 
 ### The slots prop
 
-Use the `slots` prop to replace a component's interior slots.
+Use the `slots` prop to replace the elements in a component's slots, including the root.
 The example below shows how to override the listbox slot in the [Select](/base/react-select/) component—a `<ul>` by default—with an `<ol>`:
 
 {{"demo": "OverridingInternalSlot.js"}}
 
-Note that you can also use the `slots` prop to override the root slot:
-
-```jsx
-// This:
-<Select slots={{ root: 'span' }} />
-
-// ...is the same as this:
-<Select component="span">
-```
-
-But if you try to override the root slot with both `component` and `slots`, then `component` will take precedence:
-
-```jsx
-// This:
-<Select component="div" slots={{ root: 'span' }} />
-
-// ...renders as this:
-<div class="MuiSelect-root" />
-```
-
 ### The slotProps prop
 
 The `slotProps` prop is an object that contains the props for all slots within a component.
 You can use it to define additional custom props to pass to a component's interior slots.
 
-For example, the code snippet below shows how to add a custom CSS class to the badge slot of the [Base UI Badge](/base/react-badge/) component:
+For example, the code snippet below shows how to add a custom CSS class to the badge slot of the [Badge](/base/react-badge/) component:
 
 ```jsx
 <Badge slotProps={{ badge: { className: 'my-badge' } }} />
diff --git a/docs/pages/base/api/button.json b/docs/pages/base/api/button.json
index 9d2090aafad028..767f019b519b52 100644
--- a/docs/pages/base/api/button.json
+++ b/docs/pages/base/api/button.json
@@ -6,7 +6,6 @@
         "description": "func<br>&#124;&nbsp;{ current?: { focusVisible: func } }"
       }
     },
-    "component": { "type": { "name": "elementType" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "focusableWhenDisabled": { "type": { "name": "bool" }, "default": "false" },
     "slotProps": {
diff --git a/docs/translations/api-docs-base/button/button.json b/docs/translations/api-docs-base/button/button.json
index 6f795c3ba97556..e880be5b3dbae4 100644
--- a/docs/translations/api-docs-base/button/button.json
+++ b/docs/translations/api-docs-base/button/button.json
@@ -2,7 +2,6 @@
   "componentDescription": "The foundation for building custom-styled buttons.",
   "propDescriptions": {
     "action": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disabled": "If <code>true</code>, the component is disabled.",
     "focusableWhenDisabled": "If <code>true</code>, allows a disabled button to receive focus.",
     "slotProps": "The props used for each slot inside the Button.",
diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
index f1f6d8934b85fe..a61f12ae12ca76 100644
--- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -313,6 +313,7 @@ const generateApiPage = (
   reactApi: ReactApi,
   onlyJsonFile: boolean = false,
 ) => {
+  const normalizedApiPathname = reactApi.apiPathname.replace(/\\/g, '/');
   /**
    * Gather the metadata needed for the component's API page.
    */
@@ -351,7 +352,7 @@ const generateApiPage = (
     }),
     spread: reactApi.spread,
     themeDefaultProps: reactApi.themeDefaultProps,
-    muiName: reactApi.apiPathname.startsWith('/joy-ui')
+    muiName: normalizedApiPathname.startsWith('/joy-ui')
       ? reactApi.muiName.replace('Mui', 'Joy')
       : reactApi.muiName,
     forwardsRefTo: reactApi.forwardsRefTo,
@@ -421,14 +422,16 @@ const attachTranslations = (reactApi: ReactApi) => {
       let description = generatePropDescription(prop, propName);
       description = renderMarkdownInline(description);
 
+      const normalizedApiPathname = reactApi.apiPathname.replace(/\\/g, '/');
+
       if (propName === 'classes') {
         description += ' See <a href="#css">CSS API</a> below for more details.';
       } else if (propName === 'sx') {
         description +=
           ' See the <a href="/system/getting-started/the-sx-prop/">`sx` page</a> for more details.';
-      } else if (propName === 'slots' && !reactApi.apiPathname.startsWith('/material-ui')) {
+      } else if (propName === 'slots' && !normalizedApiPathname.startsWith('/material-ui')) {
         description += ' See <a href="#slots">Slots API</a> below for more details.';
-      } else if (reactApi.apiPathname.startsWith('/joy-ui')) {
+      } else if (normalizedApiPathname.startsWith('/joy-ui')) {
         switch (propName) {
           case 'size':
             description +=
@@ -682,14 +685,17 @@ export default async function generateComponentApi(
   // eslint-disable-next-line no-console
   console.log('Built API docs for', reactApi.name);
 
+  const normalizedApiPathname = reactApi.apiPathname.replace(/\\/g, '/');
+  const normalizedFilename = reactApi.filename.replace(/\\/g, '/');
+
   if (!skipApiGeneration) {
     // Generate pages, json and translations
     let translationPagesDirectory = 'docs/translations/api-docs';
-    if (reactApi.apiPathname.startsWith('/joy-ui') && reactApi.filename.includes('mui-joy/src')) {
+    if (normalizedApiPathname.startsWith('/joy-ui') && normalizedFilename.includes('mui-joy/src')) {
       translationPagesDirectory = 'docs/translations/api-docs-joy';
     } else if (
-      reactApi.apiPathname.startsWith('/base') &&
-      reactApi.filename.includes('mui-base/src')
+      normalizedApiPathname.startsWith('/base') &&
+      normalizedFilename.includes('mui-base/src')
     ) {
       translationPagesDirectory = 'docs/translations/api-docs-base';
     }
@@ -697,7 +703,7 @@ export default async function generateComponentApi(
     generateApiTranslations(path.join(process.cwd(), translationPagesDirectory), reactApi);
 
     // Once we have the tabs API in all projects, we can make this default
-    const generateOnlyJsonFile = reactApi.apiPathname.startsWith('/base');
+    const generateOnlyJsonFile = normalizedApiPathname.startsWith('/base');
     generateApiPage(apiPagesDirectory, translationPagesDirectory, reactApi, generateOnlyJsonFile);
 
     // Add comment about demo & api links (including inherited component) to the component file
diff --git a/packages/mui-base/src/Button/Button.spec.tsx b/packages/mui-base/src/Button/Button.spec.tsx
index 43f40e78d2c712..6bedc9a98f060b 100644
--- a/packages/mui-base/src/Button/Button.spec.tsx
+++ b/packages/mui-base/src/Button/Button.spec.tsx
@@ -24,24 +24,37 @@ const polymorphicComponentTest = () => {
       return <div />;
     };
 
+  const Root = function Root() {
+    return <div />;
+  };
+
   return (
     <div>
       {/* @ts-expect-error */}
       <Button invalidProp={0} />
 
-      <Button component="a" href="#" />
+      <Button slots={{ root: 'a' }} href="#" />
 
-      <Button component={CustomComponent} stringProp="test" numberProp={0} />
-      {/* @ts-expect-error */}
-      <Button component={CustomComponent} />
+      <Button<typeof CustomComponent>
+        slots={{ root: CustomComponent }}
+        stringProp="test"
+        numberProp={0}
+      />
+
+      {/* @ts-expect-error onClick must be specified in the custom root component */}
+      <Button<typeof Root> slots={{ root: Root }} onClick={() => {}} />
+
+      {/* @ts-expect-error required props not specified */}
+      <Button<typeof CustomComponent> slots={{ root: CustomComponent }} />
+
+      <Button<'svg'> viewBox="" />
 
       <Button
-        component="button"
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <Button<'div'>
-        component="div"
+        slotProps={{ root: 'div' }}
         ref={(elem) => {
           expectType<HTMLDivElement | null, typeof elem>(elem);
         }}
diff --git a/packages/mui-base/src/Button/Button.test.tsx b/packages/mui-base/src/Button/Button.test.tsx
index feb4987795731f..a2c9cb0d849713 100644
--- a/packages/mui-base/src/Button/Button.test.tsx
+++ b/packages/mui-base/src/Button/Button.test.tsx
@@ -26,11 +26,12 @@ describe('<Button />', () => {
         expectedClassName: buttonClasses.root,
       },
     },
+    skip: ['componentProp'],
   }));
 
   describe('role attribute', () => {
     it('is set when the root component is an HTML element other than a button', () => {
-      const { getByRole } = render(<Button component="span" />);
+      const { getByRole } = render(<Button slots={{ root: 'span' }} />);
       expect(getByRole('button')).not.to.equal(null);
     });
 
@@ -42,7 +43,7 @@ describe('<Button />', () => {
         ) => <span role={props.role} ref={ref} />,
       );
 
-      const { getByRole } = render(<Button component={WrappedSpan} />);
+      const { getByRole } = render(<Button slots={{ root: WrappedSpan }} />);
       expect(getByRole('button')).not.to.equal(null);
     });
 
@@ -54,7 +55,7 @@ describe('<Button />', () => {
         ) => <button role={props.role} ref={ref} />,
       );
 
-      const { getByRole } = render(<Button component={WrappedButton} />);
+      const { getByRole } = render(<Button slots={{ root: WrappedButton }} />);
       expect(getByRole('button')).not.to.have.attribute('role');
     });
   });
@@ -103,7 +104,9 @@ describe('<Button />', () => {
 
     describe('as non-button element', () => {
       it('can receive focus when focusableWhenDisabled is set', () => {
-        const { getByRole } = render(<Button component="span" focusableWhenDisabled disabled />);
+        const { getByRole } = render(
+          <Button slots={{ root: 'span' }} focusableWhenDisabled disabled />,
+        );
 
         const button = getByRole('button');
         act(() => {
@@ -114,7 +117,9 @@ describe('<Button />', () => {
       });
 
       it('has aria-disabled and tabIndex attributes set', () => {
-        const { getByRole } = render(<Button component="span" focusableWhenDisabled disabled />);
+        const { getByRole } = render(
+          <Button slots={{ root: 'span' }} focusableWhenDisabled disabled />,
+        );
 
         const button = getByRole('button');
 
@@ -125,7 +130,7 @@ describe('<Button />', () => {
       it('does not respond to user actions when disabled and focused', () => {
         const handleClick = spy();
         const { getByRole } = render(
-          <Button component="span" focusableWhenDisabled disabled onClick={handleClick} />,
+          <Button slots={{ root: 'span' }} focusableWhenDisabled disabled onClick={handleClick} />,
         );
 
         const button = getByRole('button');
@@ -151,7 +156,7 @@ describe('<Button />', () => {
     });
 
     it('renders as the element provided in the "component" prop, even with a "href" prop', () => {
-      const { getByRole } = render(<Button component="h1" href="#" />);
+      const { getByRole } = render(<Button slots={{ root: 'h1' }} href="#" />);
       expect(getByRole('heading')).not.to.equal(null);
     });
 
@@ -168,7 +173,7 @@ describe('<Button />', () => {
     });
 
     it('renders as the element provided in the "component" prop, even with a "to" prop', () => {
-      const { getByRole } = render(<Button component="h1" to="#" />);
+      const { getByRole } = render(<Button slots={{ root: 'h1' }} to="#" />);
       expect(getByRole('heading')).not.to.equal(null);
     });
 
diff --git a/packages/mui-base/src/Button/Button.tsx b/packages/mui-base/src/Button/Button.tsx
index 013c3fb78e56e1..f466ea6af56f7d 100644
--- a/packages/mui-base/src/Button/Button.tsx
+++ b/packages/mui-base/src/Button/Button.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import composeClasses from '../composeClasses';
 import { getButtonUtilityClass } from './buttonClasses';
 import { ButtonProps, ButtonTypeMap, ButtonRootSlotProps, ButtonOwnerState } from './Button.types';
@@ -36,16 +36,9 @@ const Button = React.forwardRef(function Button<RootComponentType extends React.
   const {
     action,
     children,
-    component,
     disabled,
     focusableWhenDisabled = false,
-    onBlur,
-    onClick,
-    onFocus,
     onFocusVisible,
-    onKeyDown,
-    onKeyUp,
-    onMouseLeave,
     slotProps = {},
     slots = {},
     ...other
@@ -79,7 +72,7 @@ const Button = React.forwardRef(function Button<RootComponentType extends React.
   const classes = useUtilityClasses(ownerState);
 
   const defaultElement = other.href || other.to ? 'a' : 'button';
-  const Root: React.ElementType = component ?? slots.root ?? defaultElement;
+  const Root: React.ElementType = slots.root ?? defaultElement;
   const rootProps: WithOptionalOwnerState<ButtonRootSlotProps> = useSlotProps({
     elementType: Root,
     getSlotProps: getRootProps,
@@ -93,7 +86,7 @@ const Button = React.forwardRef(function Button<RootComponentType extends React.
   });
 
   return <Root {...rootProps}>{children}</Root>;
-}) as OverridableComponent<ButtonTypeMap>;
+}) as PolymorphicComponent<ButtonTypeMap>;
 
 Button.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -115,11 +108,6 @@ Button.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -134,34 +122,10 @@ Button.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   href: PropTypes.string,
-  /**
-   * @ignore
-   */
-  onBlur: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
   /**
    * @ignore
    */
   onFocusVisible: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onKeyUp: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onMouseLeave: PropTypes.func,
   /**
    * The props used for each slot inside the Button.
    * @default {}
diff --git a/packages/mui-base/src/Button/Button.types.ts b/packages/mui-base/src/Button/Button.types.ts
index c873aa0f89eb5d..2b82188813ecfb 100644
--- a/packages/mui-base/src/Button/Button.types.ts
+++ b/packages/mui-base/src/Button/Button.types.ts
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { UseButtonParameters, UseButtonRootSlotProps } from '../useButton';
 import { SlotComponentProps } from '../utils';
+import { PolymorphicProps } from '../utils/PolymorphicComponent';
 
 export interface ButtonActions {
   focusVisible(): void;
@@ -41,9 +42,7 @@ export interface ButtonSlots {
 
 export type ButtonProps<
   RootComponentType extends React.ElementType = ButtonTypeMap['defaultComponent'],
-> = OverrideProps<ButtonTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<ButtonTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export interface ButtonTypeMap<
   AdditionalProps = {},
diff --git a/packages/mui-base/src/utils/PolymorphicComponent.ts b/packages/mui-base/src/utils/PolymorphicComponent.ts
new file mode 100644
index 00000000000000..296afc23fcf618
--- /dev/null
+++ b/packages/mui-base/src/utils/PolymorphicComponent.ts
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { OverridableTypeMap } from '@mui/types';
+
+/**
+ * A component whose root component can be controlled explicitly with a generic type parameter.
+ * Adjusts valid props based on the type of `RootComponent`.
+ *
+ * @template TypeMap The interface the defines the props and a default root element of the component.
+ */
+export type PolymorphicComponent<TypeMap extends OverridableTypeMap> = {
+  <RootComponent extends React.ElementType = TypeMap['defaultComponent']>(
+    props: PolymorphicProps<TypeMap, RootComponent>,
+  ): JSX.Element | null;
+  propTypes?: any;
+  displayName?: string | undefined;
+};
+
+/**
+ * Own props of the component augmented with props of the root component.
+ */
+export type PolymorphicProps<
+  TypeMap extends OverridableTypeMap,
+  RootComponent extends React.ElementType,
+> = TypeMap['props'] & Omit<React.ComponentPropsWithRef<RootComponent>, keyof TypeMap['props']>;
diff --git a/packages/mui-base/src/utils/index.ts b/packages/mui-base/src/utils/index.ts
index d6e65355fd32ff..5ad2a254192e6f 100644
--- a/packages/mui-base/src/utils/index.ts
+++ b/packages/mui-base/src/utils/index.ts
@@ -6,4 +6,5 @@ export { default as isHostComponent } from './isHostComponent';
 export { default as resolveComponentProps } from './resolveComponentProps';
 export { default as useSlotProps } from './useSlotProps';
 export { default as mergeSlotProps } from './mergeSlotProps';
+export * from './PolymorphicComponent';
 export * from './types';
diff --git a/test/utils/describeConformanceUnstyled.tsx b/test/utils/describeConformanceUnstyled.tsx
index 68158040535aa7..7c62a61c43a538 100644
--- a/test/utils/describeConformanceUnstyled.tsx
+++ b/test/utils/describeConformanceUnstyled.tsx
@@ -102,7 +102,7 @@ function testPropForwarding(
 }
 
 function testSlotsProp(element: React.ReactElement, getOptions: () => UnstyledConformanceOptions) {
-  const { render, slots, testComponentPropWith: Element = 'div' } = getOptions();
+  const { render, slots, skip, testComponentPropWith: Element = 'div' } = getOptions();
 
   if (!render) {
     throwMissingPropError('render');
@@ -165,6 +165,10 @@ function testSlotsProp(element: React.ReactElement, getOptions: () => UnstyledCo
   });
 
   it('uses the component provided in the `component` prop when both `component` and `slots.root` are provided', () => {
+    if (skip && skip.indexOf('componentProp') >= 0) {
+      return;
+    }
+
     const RootComponentA = React.forwardRef(
       ({ children }: React.PropsWithChildren<{}>, ref: React.Ref<any>) => (
         // @ts-ignore