React Component Design

Button.jsx

const Button = ({ tagName: TagName = 'button', ...rest }) => <TagName className="button" {...rest} />;

const App = () => {
  return (
      <>
         <Button onClick={() => console.log('clicked')}>renders HTMLButtonElement (default)</Button>
         <Button tagName="a" href="http://google.com">renders HTMLAnchorElement (for functional purposes)</Button>
         <Button tagName="h3">renders HTMLHeadingElement (for weird SEO purposes)</Button>
      </>
  );
}

It's key to understand that a Button component is a Button component purely because it looks a certain way, not because of the markup it renders. i.e. if it looks different, use a different component.