Render link as button - best practice?

[aaronadamsCA]

Does anyone have a good pattern for rendering a Link that looks like a Button?

I can't just <Link variant="buttons.primary">, because that fails to pick up the styles hard-coded into the Button component.

<Button as={Link}> seems to grab both button and link styles, which is awkward since the link styles add undesirable colours/hovers to the button.

<Link><Button as="span" /></Link> is what I've settled on for now; it generates compliant HTML5, and (at least with my theme) the link style doesn't affect the button's appearance.

But I wonder if anyone has a less awkward solution?

[lachlanjc]

Hey, great question! The answer depends on what Link component you're using. If you're using Next.js, the last one is absolutely the way to go:

<Link href="/about" passHref>
<Button as="a">About us</Button>
</Link>

If you just need to render a Link (I believe React Router does it this way), <Button as={Link} is the way to go. I'd add text-decoration: none; & override the link hover styles directly in your theme styles.

[hasparus]

But I wonder if anyone has a less awkward solution?

I think all solutions here are a bit awkward, and the usual thing to do would be building your own component gluing Theme UI and your chosen routing library.