[docs] component prop does not exists in the Button component, at least not recognized by TS

[kasir-barati]

Duplicates

• I have searched the existing issues

Related page

https://mui.com/material-ui/api/button/

Kind of issue

Missing information

Issue description

I am developing a upload button with MUI and the code works but TS complains. Here is the code:

import { FileUpload } from '@mui/icons-material';
import { Button, ButtonProps } from '@mui/material';
import { PropsWithChildren } from 'react';

export function UploadButton({
    children,
    ...props
}: PropsWithChildren<ButtonProps>) {
    return (
        <Button variant="contained" component="label" {...props}>
            {children}
            <input hidden accept="image/*" type="file" />
            <FileUpload />
        </Button>
    );
}

Here is what I can see in the VSCode:

No overload matches this call.
  Overload 1 of 3, '(props: { href: string; } & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: OverridableStringUnion<"inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning", ButtonPropsColorOverrides> | undefined; ... 9 more ...; variant?: OverridableStringUnion<...> | undefined; } & Omit<...> & CommonProps & Omit<...>): Element', gave the following error.
    Type '{ children: (ReactNode | Element)[]; classes?: (Partial<ButtonClasses> & Partial<ClassNameMap<never>>) | undefined; ... 291 more ...; component: string; }' is not assignable to type 'IntrinsicAttributes & { href: string; } & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: OverridableStringUnion<...> | undefined; ... 9 more ...; variant?: OverridableStringUnion<...> | undefined; } & Omit<...> & CommonProps & Omit<...>'.
      Property 'component' does not exist on type 'IntrinsicAttributes & { href: string; } & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: OverridableStringUnion<...> | undefined; ... 9 more ...; variant?: OverridableStringUnion<...> | undefined; } & Omit<...> & CommonProps & Omit<...>'.
  Overload 2 of 3, '(props: { component: "label"; } & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: OverridableStringUnion<"inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning", ButtonPropsColorOverrides> | undefined; ... 9 more ...; variant?: OverridableStringUnion<...> | undefined; } & Omit<...> & CommonProps & Omit<...>): Element | null', gave the following error.
    Type '{ children: (ReactNode | Element)[]; classes?: (Partial<ButtonClasses> & Partial<ClassNameMap<never>>) | undefined; ... 291 more ...; component: "label"; }' is not assignable to type 'Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & { ...; }, keyof CommonProps | ... 22 more ... | "variant">'.
      Types of property 'onCopy' are incompatible.
        Type 'ClipboardEventHandler<HTMLButtonElement> | undefined' is not assignable to type 'ClipboardEventHandler<HTMLLabelElement> | undefined'.
          Type 'ClipboardEventHandler<HTMLButtonElement>' is not assignable to type 'ClipboardEventHandler<HTMLLabelElement>'.
            Type 'HTMLButtonElement' is missing the following properties from type 'HTMLLabelElement': control, htmlFor
  Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<ButtonTypeMap<{}, "button">>>): Element | null', gave the following error.
    Type '{ children: (ReactNode | Element)[]; classes?: (Partial<ButtonClasses> & Partial<ClassNameMap<never>>) | undefined; ... 291 more ...; component: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: OverridableStringUnion<"inherit" | ... 5 more ... | "warning", ButtonPropsColorOverrides> | undefined; ... 9 more ...; variant?: OverridableStringUnion<...> | undefined; } & Omit<...> & CommonProps & Omit<...>'.
      Property 'component' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: OverridableStringUnion<"inherit" | ... 5 more ... | "warning", ButtonPropsColorOverrides> | undefined; ... 9 more ...; variant?: OverridableStringUnion<...> | undefined; } & Omit<...> & CommonProps & Omit<...>'.ts(2769)

When I try to use intellisense I cannot find component and this error only is in VSCode. When I run my project it just works:

Context 🔦

"dependencies": {
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.11.16",
    "@mui/lab": "5.0.0-alpha.129",
    "@mui/material": "^5.13.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-typed": "^1.2.0",
},
"devDependencies": {
    "@types/react": "^18.2.6",
    "@types/react-dom": "^18.2.4",
    "@vitejs/plugin-react": "^3.1.0",
    "vite": "^4.3.5",
}

And here is more:

$ node -v
v18.16.0
$ npm -v 
9.5.1

[michaldudak]

Duplicate of #15827
Will be fixed by #35924

[kasir-barati]

Thanks @michaldudak and sorry for any inconvenience this may have caused.