RFC on my approach for making router-ified links that look like buttons

[sebm]

I'm implementing a design where most of the links look like buttons.

My instinctive approach to implementing them is:

import { Button } from '@twilio-paste/core';
import { Link } from 'react-router-dom';
... 
          <Link to={url}>
            <Button as="span" variant="primary">
              text
            </Button>
          </Link>

I like this approach for the following reasons:

• I get the look of a Button.
• I get all the router pushstate goodies from the <Link> component.
• As far as I can tell the browser ends up seeing an <a> which is semantically appropriate for this usecase.

I don't see this pattern much, though. I'm more likely to see a <Button> whose click handler uses ROUTER_LIB.push(url). I disagree with this approach for the following reasons:

• <Button>s are not semantically navigational.
• I feel like the implementation details re: navigation are best encapsulated in whatever 'react-router-dom'.Link does, rather than rolling my own handler.

Furthermore, for my specific use case, I have to use hash-based routing (this is a non-console project), so I appreciate the extra abstraction this approach gives me.

Can you please either:

• confirm that my approach is sound and is not an abuse of Paste; and/or
• castigate me for my weird coding style and set me on the right path?

Thanks Paste crew <3

[SiTaggart]

Hi @sebm

Before anyone gives a full answer, you're on the right lines and the Button vs Anchor section, followed by the accessibility section on the Button component page should help answer some of the missing pieces.

What might be nice in addition to the question would be a screen shot of what you're trying to achieve. By the sounds of it, you might be running against the final bullet point in the Accessibility section:

Use anchors that look like buttons sparingly. Voice dictation users may encounter issues when trying to activate them. A user may say, “Click the read more button”, but the dictation software won’t respond since it can’t tell what the anchor looks like visually. Use an alternative where possible, such as an anchor with an icon or with a larger font size.

This is where the screenshot might help give better guidance on what to do with the design, before we get into implementation details.

In general terms of wiring up the Anchor or Button component to something like react router, the Link component has a component prop you might want to use https://reactrouter.com/web/api/Link/component-reactcomponent

[corinne-nagel]

Following up here, @sebm did you get the info you needed?