There are quite a few ways to get HTML component’s prop types in React. Let’s go through them and use <button> as an example.

TLDR; use following:

type ButtonProps = React.ComponentPropsWithoutRef<'button'>;

// Example: if you want to override onClick to allow async functions:
type ButtonProps = ComponentPropsWithoutRef<'button'> & {
  onClick?: (
    event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>,
  ) => void | Promise<void>;
};

Best methods

• React.ComponentPropsWithoutRef<'button'> usually best, forwardRef not used
• React.ComponentPropsWithRef<'button'> when building reusable component libraries and forwardRef is used

Works but verbose:

• React.ComponentProps<'button'>  same as WithRef above, but better to be specific
• React.JSX.IntrinsicElements["button"]verbose and cannot inline, i.e. first have to define type for the button before getting the props
• React.ButtonHTMLAttributes<HTMLButtonElement> verbose and must remember correct ButtonHTMLAttributesfor each html element (for list of elements see List of specialized HTML Attributes toggle), same as React.ComponentPropsWithoutRef<'button'>
• React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> verbose and same as React.ComponentPropsWithRef<'button'>

Does not work:

• React.HTMLProps<HTMLButtonElement> wrong typings
• React.HTMLAttributes<HTMLButtonElement> wrong typings (div is likely a special case which works)

For more information read

• https://stackoverflow.com/questions/48198180/what-is-the-difference-between-react-htmlprops-and-react-htmlattributest
• https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/ (read under “Why not ComponentProps or IntrinsicElements or [Element]HTMLAttributes or HTMLProps or HTMLAttributes?” toggle)