Property 'type' does not exist on button

Question

I have this button component:

export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
    small?: boolean;
}

class Button extends React.Component<ButtonProps> { ... }

But when I try to do:

<Button type="submit"></Button>

I get this error:

Property 'type' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'

Why? Isn't the type attribute part of React.HTMLAttributes<HTMLButtonElement>? What is the proper/recommended way to set this attribute?

Answer 1

export interface ButtonProps
  extends React.DetailedHTMLProps<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement
  > {
  small?: boolean
}

class ButtonZ extends React.Component<ButtonProps> {
  render() {
    return <></>
  }
}

If you're using VSCode as your IDE hovering over an HTML component and inspecting the tooltip is a good way to see the types and props.