[Button][base] Drop component prop

docs/data/base/components/button/UnstyledButtonCustom.js

@@ -22,7 +22,7 @@ ButtonRoot.propTypes = {
 };
 
 const SvgButton = React.forwardRef(function SvgButton(props, ref) {
-  return <ButtonUnstyled {...props} component={CustomButtonRoot} ref={ref} />;
+  return <ButtonUnstyled {...props} slots={{ root: CustomButtonRoot }} ref={ref} />;
 });
 
 export default function UnstyledButtonCustom() {

docs/data/base/components/button/UnstyledButtonCustom.tsx

@@ -26,7 +26,7 @@ const SvgButton = React.forwardRef(function SvgButton(
   props: ButtonUnstyledProps,
   ref: React.ForwardedRef<any>,
 ) {
-  return <ButtonUnstyled {...props} component={CustomButtonRoot} ref={ref} />;
+  return <ButtonUnstyled {...props} slots={{ root: CustomButtonRoot }} ref={ref} />;
 });
 
 export default function UnstyledButtonCustom() {

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>

docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx

@@ -5,15 +5,15 @@ import ButtonUnstyled, {
 } from '@mui/base/ButtonUnstyled';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
-import { OverridableComponent } from '@mui/types';
+import { OverridableComponent } 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>

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>

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>

docs/data/base/components/button/UnstyledButtonsSpan.tsx

@@ -5,13 +5,13 @@ import ButtonUnstyled, {
 } from '@mui/base/ButtonUnstyled';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
-import { OverridableComponent } from '@mui/types';
+import { OverridableComponent } 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>

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>

docs/data/base/components/button/button.md

@@ -61,10 +61,10 @@ 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
-<ButtonUnstyled component="div" />
+<ButtonUnstyled slots={{ root: 'div' }} />
 ```
 
 If you provide a non-interactive element such as a `<span>`, the Unstyled Button component will automatically add the necessary accessibility attributes.
@@ -74,8 +74,8 @@ Compare the attributes on the `<span>` in this demo with the Button from the pre
 {{"demo": "UnstyledButtonsSpan.js"}}
 
 :::warning
-If an Unstyled Button is customized with a non-button element (i.e. `<ButtonUnstyled component="span" />`), it will not submit the form it's in when clicked.
-Similarly, `<ButtonUnstyled component="span" type="reset">` will not reset its parent form.
+If an Unstyled Button is customized with a non-button element (i.e. `<ButtonUnstyled slots={{ root: "span" }} />`), it will not submit the form it's in when clicked.
+Similarly, `<ButtonUnstyled slots={{ root: "span" }} type="reset">` will not reset its parent form.
 :::
 
 ## Hook

docs/data/base/guides/overriding-component-structure/OverridingRootSlot.js

@@ -2,5 +2,5 @@ import * as React from 'react';
 import ButtonUnstyled from '@mui/base/ButtonUnstyled';
 
 export default function DivButton() {
-  return <ButtonUnstyled component="div">Button</ButtonUnstyled>;
+  return <ButtonUnstyled slots={{ root: 'div' }}>Button</ButtonUnstyled>;
 }

docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx

@@ -2,5 +2,5 @@ import * as React from 'react';
 import ButtonUnstyled from '@mui/base/ButtonUnstyled';
 
 export default function DivButton() {
-  return <ButtonUnstyled component="div">Button</ButtonUnstyled>;
+  return <ButtonUnstyled slots={{ root: 'div' }}>Button</ButtonUnstyled>;
 }

docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx.preview

@@ -1 +1 @@
-<ButtonUnstyled component="div">Button</ButtonUnstyled>
+<ButtonUnstyled slots={{ root: 'div' }}>Button</ButtonUnstyled>

docs/pages/base/api/button-unstyled.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": {

docs/translations/api-docs/button-unstyled/button-unstyled.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.",

packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx

@@ -34,19 +34,21 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <ButtonUnstyled invalidProp={0} />
 
-      <ButtonUnstyled component="a" href="#" />
+      <ButtonUnstyled slots={{ root: 'a' }} href="#" />
 
-      <ButtonUnstyled component={CustomComponent} stringProp="test" numberProp={0} />
+      <ButtonUnstyled<typeof CustomComponent>
+        slots={{ root: CustomComponent }}
+        stringProp="test"
+        numberProp={0}
+      />
       {/* @ts-expect-error */}
-      <ButtonUnstyled component={CustomComponent} />
+      <ButtonUnstyled<typeof CustomComponent> slots={{ root: CustomComponent }} />
 
       <ButtonUnstyled
-        component="button"
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <ButtonUnstyled<'div'>
-        component="div"
         ref={(elem) => {
           expectType<HTMLDivElement | null, typeof elem>(elem);
         }}

packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.test.tsx

@@ -26,11 +26,12 @@ describe('<ButtonUnstyled />', () => {
         expectedClassName: buttonUnstyledClasses.root,
       },
     },
+    skip: ['componentProp'],
   }));
 
   describe('role attribute', () => {
     it('is set when the root component is an HTML element other than a button', () => {
-      const { getByRole } = render(<ButtonUnstyled component="span" />);
+      const { getByRole } = render(<ButtonUnstyled slots={{ root: 'span' }} />);
       expect(getByRole('button')).not.to.equal(null);
     });
 
@@ -42,7 +43,7 @@ describe('<ButtonUnstyled />', () => {
         ) => <span role={props.role} ref={ref} />,
       );
 
-      const { getByRole } = render(<ButtonUnstyled component={WrappedSpan} />);
+      const { getByRole } = render(<ButtonUnstyled slots={{ root: WrappedSpan }} />);
       expect(getByRole('button')).not.to.equal(null);
     });
 
@@ -54,7 +55,7 @@ describe('<ButtonUnstyled />', () => {
         ) => <button role={props.role} ref={ref} />,
       );
 
-      const { getByRole } = render(<ButtonUnstyled component={WrappedButton} />);
+      const { getByRole } = render(<ButtonUnstyled slots={{ root: WrappedButton }} />);
       expect(getByRole('button')).not.to.have.attribute('role');
     });
   });
@@ -104,7 +105,7 @@ describe('<ButtonUnstyled />', () => {
     describe('as non-button element', () => {
       it('can receive focus when focusableWhenDisabled is set', () => {
         const { getByRole } = render(
-          <ButtonUnstyled component="span" focusableWhenDisabled disabled />,
+          <ButtonUnstyled slots={{ root: 'span' }} focusableWhenDisabled disabled />,
         );
 
         const button = getByRole('button');
@@ -117,7 +118,7 @@ describe('<ButtonUnstyled />', () => {
 
       it('has aria-disabled and tabIndex attributes set', () => {
         const { getByRole } = render(
-          <ButtonUnstyled component="span" focusableWhenDisabled disabled />,
+          <ButtonUnstyled slots={{ root: 'span' }} focusableWhenDisabled disabled />,
         );
 
         const button = getByRole('button');
@@ -129,7 +130,12 @@ describe('<ButtonUnstyled />', () => {
       it('does not respond to user actions when disabled and focused', () => {
         const handleClick = spy();
         const { getByRole } = render(
-          <ButtonUnstyled component="span" focusableWhenDisabled disabled onClick={handleClick} />,
+          <ButtonUnstyled
+            slots={{ root: 'span' }}
+            focusableWhenDisabled
+            disabled
+            onClick={handleClick}
+          />,
         );
 
         const button = getByRole('button');
@@ -155,7 +161,7 @@ describe('<ButtonUnstyled />', () => {
     });
 
     it('renders as the element provided in the "component" prop, even with a "href" prop', () => {
-      const { getByRole } = render(<ButtonUnstyled component="h1" href="#" />);
+      const { getByRole } = render(<ButtonUnstyled slots={{ root: 'h1' }} href="#" />);
       expect(getByRole('heading')).not.to.equal(null);
     });
 
@@ -172,7 +178,7 @@ describe('<ButtonUnstyled />', () => {
     });
 
     it('renders as the element provided in the "component" prop, even with a "to" prop', () => {
-      const { getByRole } = render(<ButtonUnstyled component="h1" to="#" />);
+      const { getByRole } = render(<ButtonUnstyled slots={{ root: 'h1' }} to="#" />);
       expect(getByRole('heading')).not.to.equal(null);
     });
 

packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
+import { OverridableComponent } from '../utils/OverridableComponent';
 import composeClasses from '../composeClasses';
 import { getButtonUnstyledUtilityClass } from './buttonUnstyledClasses';
 import {
@@ -45,16 +45,9 @@ const ButtonUnstyled = React.forwardRef(function ButtonUnstyled<
   const {
     action,
     children,
-    component,
     disabled,
     focusableWhenDisabled = false,
-    onBlur,
-    onClick,
-    onFocus,
     onFocusVisible,
-    onKeyDown,
-    onKeyUp,
-    onMouseLeave,
     slotProps = {},
     slots = {},
     ...other
@@ -88,7 +81,7 @@ const ButtonUnstyled = React.forwardRef(function ButtonUnstyled<
   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<ButtonUnstyledRootSlotProps> = useSlotProps({
     elementType: Root,
     getSlotProps: getRootProps,
@@ -124,11 +117,6 @@ ButtonUnstyled.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
@@ -143,34 +131,10 @@ ButtonUnstyled.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 {}

packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.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/OverridableComponent';
 
 export interface ButtonUnstyledActions {
   focusVisible(): void;
@@ -44,14 +45,15 @@ export interface ButtonUnstyledSlots {
 }
 
 export type ButtonUnstyledProps<
-  D extends React.ElementType = ButtonUnstyledTypeMap['defaultComponent'],
-> = OverrideProps<ButtonUnstyledTypeMap<{}, D>, D> & {
-  component?: D;
-};
+  RootComponent extends React.ElementType = ButtonUnstyledTypeMap['defaultComponent'],
+> = PolymorphicProps<ButtonUnstyledTypeMap<{}, RootComponent>, RootComponent>;
 
-export interface ButtonUnstyledTypeMap<P = {}, D extends React.ElementType = 'button'> {
-  props: P & ButtonUnstyledOwnProps;
-  defaultComponent: D;
+export interface ButtonUnstyledTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'button',
+> {
+  props: AdditionalProps & ButtonUnstyledOwnProps;
+  defaultComponent: DefaultComponent;
 }
 
 export type ButtonUnstyledOwnerState = ButtonUnstyledOwnProps & {