<Button as="a" /> with React Router

[and-lopes]

PN currently utilizes a combination of Tab and Buttons as="a" to organize links to different Incoming Phone Number pages. This allows us to mask the link within the Tab without an underline while abiding by accessibility guidelines.

This implementation triggers a page refresh, however, so I'm looking to fix this. If we use an Anchor, we get the underline though. Should we be rethinking this design? I'm leaning towards just using a button with my own implementation: https://github.com/twilio-internal/console/pull/1876

TLDR: Button as="a" lacks flexibility in implementation for custom routing / Anchor lacks

[TheSisb]

Hi @and-lopes,

Have you seen this previous discussion where I demonstrate how we can make Tabs re-direct to sub-routes? Let me know if this helps you get going. As Simon pointed out in that thread, Tabs should not be used as page navigation, they should only switch content. Alas we haven't had the chance to build the component to solve this problem yet. If you're able to contemplate page design, it may be something to keep in mind.

[and-lopes]

Hadn't seen that. Thank you!