[@types/react] button refuses its own props

[brkc]

• I tried using the @types/react package and had problems.
• I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• Mention the authors (see Definitions by: in index.d.ts) so they can respond.
  • Authors: @ferdaber @lukyth @DovydasNavickas

const Button = (props: React.HTMLProps<HTMLButtonElement>) => (
  <button {...props} />
);

error TS2322: Type '{ accept?: string | undefined; acceptCharset?: string | undefined; action?: string | undefined; allowFullScreen?: boolean | undefined; allowTransparency?: boolean | undefined; alt?: string | undefined; ... 353 more ...; key?: string | ... 1 more ... | undefined; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
  Type '{ accept?: string | undefined; acceptCharset?: string | undefined; action?: string | undefined; allowFullScreen?: boolean | undefined; allowTransparency?: boolean | undefined; alt?: string | undefined; ... 353 more ...; key?: string | ... 1 more ... | undefined; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
    Types of property 'type' are incompatible.
      Type 'string | undefined' is not assignable to type '"button" | "reset" | "submit" | undefined'.
        Type 'string' is not assignable to type '"button" | "reset" | "submit" | undefined'.

   <button {...props} />
    ~~~~~~


Found 1 error.

[jakejrichards]

I think what you're probably looking for is React.HTMLAttributes<HTMLButtonElement>.

[ferdaber]

Jake has it right. It might even be easier to do JSX.IntrinsicElements['button'] for easier memorization.

[praxxis]

I had the most success using React.ComponentProps<'button'> - using HTMLAttributes meant the disabled prop was missing for some reason

[martpie]

So is React.ComponentProps<'button'> a workaround (or the official solution)? or is React.HTMLProps<HTMLButtonElement> "broken"?

[ferdaber]

HTMLProps is the common set all attributes that every HTML element can possibly have, so actually there's another interface called ButtonHTMLAttributes that have button-specific props. In the specific case of this issue, ButtonHTMLAttributes narrows the type of the type attribute even further to just an enumeration of those string literals ('submit' | 'button' rather than just the general string type).

So React.HTMLProps<HTMLButtonElement> is not sufficient to describe the set of attributes that an HTML button element can have. The proper (and easiest) solution is to just use ComponentProps<'button'> which automatically seeks the most appropriate interface you need for a host element.

[ElForastero]

In my case, type of the props was almost likely incorrect after partially spreading these props.

export const Button: Overload = ({
  color = 'primary',
  className,
  href,
  ...rest
}: ButtonProps | AnchorProps) => {
    // here, in ...rest, "type" property of the button will be "string | undefined".
}

So I had to force the rest-spreaded props like this:

<button className={clx} style={style} {...rest as ButtonProps}>
    {children}
</button>

[FDiskas]

Works for me:

React.ButtonHTMLAttributes<HTMLButtonElement>

[DominicTobias-b1]

In my case, type of the props was almost likely incorrect after partially spreading these props.

Incorrect seems like a stretch since you're saying it could also be AnchorProps and anchors don't have a type attribute

[ltruchot]

As another workaround:
interface ButtonProps extends Omit<HTMLProps<HTMLButtonElement>, 'type'> { //...

[StanleySathler]

If you're using React.ComponentProps<'button'> and see a weird error about incompatible ref types, try using React.ComponentPropsWithRef<'button'> or React.ComponentPropsWithoutRef<'button'> instead.

[juanmsl]

I found this issue for the same reason and this work for me

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { ... }

[ghost]

React.HTMLAttributes

Thank you!

[Weswwn]

Is there a preferred type method?

React.ComponentProps<'button'> vs React.ButtonHTMLAttributes<HTMLButtonElement>

It seems from the comments above that the React.ComponentProps<'button'> is causing some ref issues which makes me lean more towards the latter way of typing our Button elements.