Context: #6786 (comment)
The current behavior of the Button component encompasses too many responsibilities. Furthermore, this is confused by the addition of separate components ExternalLink and IconButton which behave as enhanced variants to be used in specific circumstances, though not clearly so.
Instead, we should to create two components Button and Link:
A Button...
A Link...
- Is semantically: a navigable element (
href)
- Default appearance of a link
(<Button href="..."> may override)
- Handles
rel behavior by assumptions based on incoming props (href, target)
- Open question: Must receive
href prop?
- Could warn about incorrect usage otherwise, encouraging use of Button instead (avoid
href="#" onClick="..."). But this requires that Button can assume the appearance of a link, which may be okay (as it does today with isLink prop).
A few notable advantages here:
Link is more intuitive to use in place of <a />, helping promote consistencyrel behavior is more natural to occur in Link (navigable), not Button- Eliminate
IconButton as a separate component
† Per #6786 (comment), it may be advisable for these components to be completely separated and share their own sets of consistent styling.
Context: #6786 (comment)
The current behavior of the
Buttoncomponent encompasses too many responsibilities. Furthermore, this is confused by the addition of separate componentsExternalLinkandIconButtonwhich behave as enhanced variants to be used in specific circumstances, though not clearly so.Instead, we should to create two components
ButtonandLink:A
Button...onClick)Linkrequiringhref)icon)May be navigable (by presence ofSee Components: Separate Button / Link components, eliminate ExternalLink, IconButton #7534 (comment) , Components: Separate Button / Link components, eliminate ExternalLink, IconButton #7534 (comment) , Add external link functionality to the Button component #6786 (comment)href), in which case it defers its rendering to an underlying Link†A
Link...href)(<Button href="...">may override)relbehavior by assumptions based on incoming props (href,target)hrefprop?href="#" onClick="..."). But this requires thatButtoncan assume the appearance of a link, which may be okay (as it does today withisLinkprop).A few notable advantages here:
Linkis more intuitive to use in place of<a />, helping promote consistencyrelbehavior is more natural to occur inLink(navigable), notButtonIconButtonas a separate component† Per #6786 (comment), it may be advisable for these components to be completely separated and share their own sets of consistent styling.