[ButtonUnstyled] Update to render as link when href or to is provided

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

@@ -147,4 +147,38 @@ describe('<ButtonUnstyled />', () => {
       });
     });
   });
+
+  describe('prop: href', () => {
+    it('renders as a link when the "href" prop is provided', () => {
+      const { getByRole } = render(<ButtonUnstyled href="#" />);
+      expect(getByRole('link')).not.to.equal(null);
+    });
+
+    it('renders as the element provided in the "component" prop, even with a "href" prop', () => {
+      const { getByRole } = render(<ButtonUnstyled component="h1" href="#" />);
+      expect(getByRole('heading')).not.to.equal(null);
+    });
+
+    it('renders as the element provided in the "components.Root" prop, even with a "href" prop', () => {
+      const { getByRole } = render(<ButtonUnstyled slots={{ root: 'h1' }} href="#" />);
+      expect(getByRole('heading')).not.to.equal(null);
+    });
+  });
+
+  describe('prop: to', () => {
+    it('renders as a link when the "to" prop is provided', () => {
+      const { container } = render(<ButtonUnstyled to="#" />);
+      expect(container.querySelector('a')).not.to.equal(null);
+    });
+
+    it('renders as the element provided in the "component" prop, even with a "to" prop', () => {
+      const { getByRole } = render(<ButtonUnstyled component="h1" to="#" />);
+      expect(getByRole('heading')).not.to.equal(null);
+    });
+
+    it('renders as the element provided in the "components.Root" prop, even with a "to" prop', () => {
+      const { getByRole } = render(<ButtonUnstyled slots={{ root: 'h1' }} to="#" />);
+      expect(getByRole('heading')).not.to.equal(null);
+    });
+  });
 });

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

@@ -86,7 +86,8 @@ const ButtonUnstyled = React.forwardRef(function ButtonUnstyled<
 
   const classes = useUtilityClasses(ownerState);
 
-  const Root: React.ElementType = component ?? slots.root ?? 'button';
+  const defaultElement = other.href || other.to ? 'a' : 'button';
+  const Root: React.ElementType = component ?? slots.root ?? defaultElement;
   const rootProps: WithOptionalOwnerState<ButtonUnstyledRootSlotProps> = useSlotProps({
     elementType: Root,
     getSlotProps: getRootProps,
@@ -137,6 +138,10 @@ ButtonUnstyled.propTypes /* remove-proptypes */ = {
    * @default false
    */
   focusableWhenDisabled: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  href: PropTypes.string,
   /**
    * @ignore
    */
@@ -180,6 +185,10 @@ ButtonUnstyled.propTypes /* remove-proptypes */ = {
   slots: PropTypes.shape({
     root: PropTypes.elementType,
   }),
+  /**
+   * @ignore
+   */
+  to: PropTypes.string,
 } as any;
 
 export default ButtonUnstyled;