[Button] Type conflict in Button component's href prop when using component prop

[odanado]

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.

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, 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

{
  "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