Update IconButton's loading prop type to match Button's

[schen-fn]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/react-np5dnrcm?file=Demo.tsx

Current behavior

When passing in props with the type ButtonProp into IconButton we get this TS error because loading prop in ButtonProps has the type boolean | null | undefined and loading prop in IconButtonProps has the type boolean | undefined

Type '{ children: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal; ... 302 more ...; isEndIcon: boolean | undefined; }' is not assignable to type 'IconButtonProps'.
  Types of property 'loading' are incompatible.
    Type 'boolean | null | undefined' is not assignable to type 'boolean | undefined'.
      Type 'null' is not assignable to type 'boolean | undefined'.

Expected behavior

loading prop in IconButtonProps and ButtonProps should match so we can avoid this typescript error.

Context

In my code, I'm doing something like this:

const buttonProps: ButtonProps = { id, ...rest, size };
const iconProps: IconButtonProps | undefined = icon
    ? {
        children: icon,
        label: children,
        size,
        isEndIcon: direction === 'right',
        ...iconButtonProps,
      }
    : undefined;

return (
    <>
      {is.object(iconProps) ? (
        <IconButton ref={ref} {...buttonProps} {...iconProps} />
      ) : (
        <Button ref={ref} {...buttonProps}>
          {children}
        </Button>
      )}
    </>
  );

Where IconButton is rendered if icon is present, else render Button. I want to pass ButtonProps into IconButton along with IconButtonProps, but I get a typescript error because loading prop is typed differently. The change that caused this error was implemented here: https://github.com/mui/material-ui/pull/44637/files#diff-cd39c5645f09c072c657b0bd6c2a1036b3ed36c513e0ce75a22c3522ff060592R54

Your environment

System:
OS: macOS 14.5
Binaries:
Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
pnpm: 8.15.2 - /opt/homebrew/bin/pnpm
Browsers:
Chrome: 132.0.6834.84
Edge: Not Found
Safari: 17.5
npmPackages:
@emotion/react: 11.14.0 => 11.14.0
@emotion/styled: 11.14.0 => 11.14.0
@mui/core-downloads-tracker: 6.4.0
@mui/icons-material: 6.4.0 => 6.4.0
@mui/material: 6.4.0 => 6.4.0
@mui/private-theming: 6.4.0
@mui/styled-engine: 6.4.0
@mui/system: 6.4.0 => 6.4.0
@mui/types: 7.2.21
@mui/utils: 6.4.0 => 6.4.0
@mui/x-date-pickers: 7.23.6 => 7.23.6
@mui/x-internals: 7.23.6
@types/react: 18.3.18 => 18.3.18
react: 18.3.1 => 18.3.1
react-dom: 18.3.1 => 18.3.1
typescript: 5.7.3 => 5.7.3

My tsconfig:

{
  "ts-node": {
    "transpileOnly": true
    "esm": true,
    "compilerOptions": {
      "module": "commonjs"
    }
  },
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "noUnusedParameters": false,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "jsx": "react-jsx",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "noEmit": true
  },
  "include": [
    "./src",
    "./.storybook"
  ]
}

Search keywords: loading prop

[siriwatknp]

Thanks for reporting the issue. I will fix it today.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@schen-fn How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.