Anchor element specific properties for Button

[MrSquaare]

Currently, if the href property is set to a Button component, the anchor element is used. However, it is not possible to use anchor specific properties like rel or target.

A solution to multi-element components is to propose a property (react-bootstrap named it as, reactstrap named it tag) allowing to specify the type of element (in the case of the Button component, it would be either button or a). It is then possible to determine from the latter the properties specific to an element.

[benjitrosch]

Hi @MrSquaare,

We previously attempted button/anchor polymorphism (modelled after reactstrap specifically) but I removed it in #72. The reason being that it caused type safety issues.

We may attempt it again in the future, and if you would like to open a PR it would be very welcome!

Personally, I would rather keep the code as clean and type safe as possible, even if it comes with a small loss of flexibility. My thinking when removing it was that a user who uses a <Button /> 9 times out of 10 is looking for a <button> rather than an <a> so I prioritized the button props working correctly. Worst case scenario they can just re-style a <Link /> or <a> with the btn class manually. If there's a type safe solution out there for button/anchor polymorphism that's clean and doesn't give us a "less of both" situation, then I'm all for it!

[MrSquaare]

Hello @benjitrosch,

I didn't know there was an attempt before. Indeed, polymorphism is somewhat complicated for React components, especially when it comes to ref forwarding.

I tried in the evening to find some solutions, but I always have compromises.

I found a blog post (that you may have already consulted) that I adapted for the Button component and that seemed to be the best: https://www.benmvp.com/blog/forwarding-refs-polymorphic-react-component-typescript/. The only problem is that TypeScript seems to do a lot of operations to deduce the valid types.

What do you think about it?

[rvramesh]

My 2 cents. There are 3 usescases I could think of.

1. Make a button look like link. (eg. Expand All or Collapse All). In this case there is no need for rel or target etc. The current Button I believe handles this case

2. In second case, you genuinely need a link and may be can we consider Link

3. For third case of a Link to look like Button. Can a Form be used along with the Button and specify the target in the form?