Anchors as Buttons

[GiantRobots]

We have documentation and guidance for Buttons as Anchors but not Anchors as Buttons which is still a pretty common/reasonable use case for most things UI (In my opinion) if we decide either way to support the use case of an Anchor appearing as a button (but remaining semantically different) then we should document the use case and guidance for remediations with design teams. ex I have the following design and the View Logs should be an anchor what's the best way to approach the design team to get this changed.

[TheSisb]

Hello @GiantRobots,

We have some notes about recommended use-cases for Anchors and Buttons in our docs:

• https://paste.twilio.design/components/anchor#anchor-vs-button
• https://paste.twilio.design/components/button#button-vs-anchor-link

We reasoned that Anchors should just do one thing well. Any additional appearance or functionality is already covered by Button and we didn't want to duplicate the behavior, i.e.:

<Button as="a" href="https://google.com" variant="primary">View Logs</Button>

You might want to bring this to our Design Systems Crit meeting so we can work through the problem together.

[GiantRobots]

Hmm I guess I'm asking for a link that looks like a button and it either isn't supported or that common use case isn't allowed in our design system and we should call it out and tell people the alternative.

Anchors should not be used for submitting a form, closing a modal, moving to the next step in a flow, or any other click action that a button should handle. Buttons perform an action, like submitting a form; Anchors take you somewhere, like to the documentation page.

In this case it's navigating you to the logs section and some users (like myself) enjoy middle clicking to open in a new tab which is pretty much the functionality I'm trying to preserve.

[GiantRobots]

Hmm I guess I'm asking for a link that looks like a button and it either isn't supported or that common use case isn't allowed in our design system and we should call it out and tell people the alternative.

You know I went and looked at some popular libraries and I got popular and SendGrid mixed up XD. Turns out I couldn't find a ui lib that does this (Bootstrap, Chakra, Material-UI, Ant, react-toolbox (although you can make an href on the button for that one)) SendGrid Style-guide did it by adding btn as a class.