Repository: material-ui
Issue: [Button] Type conflict in Button component's `href` prop when using `component` prop
Labels: component: button,typescript,enhancement

### Steps to reproduce

Link to live example: https://github.com/odan-sandbox/repro-mui-button-component-type-conflict/blob/main/src/repro.tsx

Steps:
1. Open `src/repro.tsx` in VSCode.
2. Get a type error.

<img width="1122" alt=" 2024-06-30 2 28 02" src="https://github.com/mui/material-ui/assets/6040962/6e4c0df3-6652-4670-8f82-9402705a599e">


### Current behavior

When using the `component` prop with the Button component, the `href` prop type does not get overridden as expected. The `component` prop is assigned a component that accepts `href` with the type `string | UrlObject`. However, the `href` prop in the Button component remains with the type `string`, leading to a type conflict.


### Expected behavior

When using the `component` prop with the Button component, the type of the `href` prop should be overridden to match the type of the `href` prop in the assigned component. Specifically, the `href` prop in the Button component should accept `string | UrlObject` instead of just `string`.


### Context

In our project, we are using the MUI Button component in combination with Next.js's Link component via the `component` prop. The Link component has an `href` prop that accepts a `string | UrlObject` type. This issue arises when we use the `UrlObject` type, which is utilized by [pathpida](https://github.com/aspida/pathpida), a tool for Next.js that automatically generates URL-related code based on file-based routing. pathpida represents URLs as `UrlObject` rather than strings.

The type conflict between the Link component's `href` prop and the MUI Button component's `href` prop (which only accepts strings) prevents us from fully leveraging the benefits of pathpida. 

### Your environment

`$ npx @mui/envinfo`

```
  System:
    OS: macOS 14.5
  Binaries:
    Node: 20.12.0 - ~/.local/share/asdf/installs/nodejs/20.12.0/bin/node
    npm: 10.8.1 - ~/.local/share/asdf/plugins/nodejs/shims/npm
    pnpm: 9.3.0 - ~/.local/share/asdf/installs/nodejs/20.12.0/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.127
    Edge: Not Found
    Safari: 17.5
  npmPackages:
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.21 
    @mui/material: ^5.15.21 => 5.15.21 
    @mui/private-theming:  5.15.20 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.20 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.20 
    @types/react: ^18.3.3 => 18.3.3 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.2.2 => 5.5.2 
```

`tsconfig`
```json
{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}
```

**Search keywords**: Button href type OverrideProps