Button as Link doesn't work as intended

[dholliday3]

I want to use a button as a link specifically because the Anchor tag is underlined which I don't want.
In the docs there's an example of exactly what I want with a link style button but when I try to add a link it doesn't work.

Here's what I'm trying to use:

When I add an href I get the expected warning that I need to use "as='a'":

But when I do what the warning says and add "as='a'" it gives me this warning and basically renders the button link unusable.

Again, the trouble here is that I don't want the button to be underlined but it seems like the main workaround is to pass an onClick and explicitly handle navigation.
Would love to be able to use the link style button as intended.

Thanks for the help!

[shleewhite]

Hi @dholliday3

Can you explain your use case for an anchor with no underline?

In general, buttons perform actions on the page the user is currently on and anchors take the user to another page. For consistency and clarity for users, Paste has a rule that all anchors have an underline and buttons do not have an underline (we have documentation about this in the Button vs. Anchor pattern).

The link style button doesn’t have an underline because even though it looks similar to an anchor, it is a button. We throw an error when you try to make a link style button an anchor because generally, it is preferable to use the actual Anchor component. The only time we only allow a Button with as=“a” if it is the primary or secondary variant.

If you need something that takes the user to another page, I would strongly suggest using the Anchor component.

[shleewhite]

@dholliday3 Could you share a screen shot of the design? I think that would help us understand the situation better.

[dholliday3]

Sure! This is what it looks like right now.

[shleewhite]

@dholliday3 Thanks for sharing! We discussed and this UI seems like a valid use case for an anchor with no underline because there are no other links in the card and these kind of marketplace UIs are very common.

Instead of using the Button or Anchor components, you can use Box to make your own custom anchor. Here is an example of how you could build it: https://codesandbox.io/s/custom-anchor-fgfkgr

[dholliday3]

Awesome - thanks!

Is there a plan to support this use-case natively? In the meantime, I could go the custom route but I'd love to see this come out of the box with either button or anchor.

Is this something that I can make a contribution to?

[shleewhite]

Unfortunately because this is an edge case, there are no plans to add support for this in the Button or Anchor component.