React does not include 'disabled' property for HTMLButtonElement type

Question

I have a component defined as follows:

function ConfirmableButton(props: { onConfirm: () => void; } & HTMLAttributes<HTMLButtonElement>)

But when using it like <ConfirmableButton disabled={disabledRows.includes(id)} />, it gives me error Property 'disabled' does not exist on type 'IntrinsicAttributes & { onConfirm: () => void; } & HTMLAttributes<HTMLButtonElement>'

What should I be using to make sure the typing is correct?

Answer 1

The generic type on HTMLAttributes<T> is only really there to give the specific element type to its event handlers. Checking the types, T in HTMLAttributes is only referenced where it extends DOMAttributes<T>, which is passed to each event handler to type the target property of the event object.

To get <button>-specific attributes, you would need to use React's ButtonHTMLAttributes<HTMLButtonElement> (which is the type React would use for a button element):

interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
    autoFocus?: boolean | undefined;
    disabled?: boolean | undefined;
    form?: string | undefined;
    formAction?: string | undefined;
    formEncType?: string | undefined;
    formMethod?: string | undefined;
    formNoValidate?: boolean | undefined;
    formTarget?: string | undefined;
    name?: string | undefined;
    type?: 'submit' | 'reset' | 'button' | undefined;
    value?: string | ReadonlyArray<string> | number | undefined;
}