Pressable or Button open in external link

[Morgan_Keepsta]

I’m trying to create an extension with a button showing an image and some text, which links to an external website.

The issue I’m having is that both the <Button to="..."> and <Pressable to="..."> components result in a link with no target set, and so navigate the current window rather than opening a new tab.

It is possible to use <Link to="..." external={true}>...</Link>, which does set target="_blank" and rel="noopener noreferrer" as I would expect, but this unfortunately results in sub-optimal styling.

Is there any chance that an external option could be added to Button/Pressable or some other way of specifying this?

[Dylan]

Hi @Morgan_Keepsta - I had this same issue for a long time.

See my workaround here:

External URL support for `<Button>` components

Ah duh, just like wrapping an HTML <button> with a <a> tag to convert a button into a link. Here’s my final solution: <Link external={true} to="https://getverdict.com" > <InlineStack columns={['fill']}> {/* the InlineStack is only to make the button full width */} <Button role="button" // DON'T USE "submit", it will not open the link kind="primary" > Open </Button> </InlineStack> </Link>

[Morgan_Keepsta]

Thanks Dylan, that’s very helpful if not the most ideal. I appreciate it! I’ll +1 the github issue in the hope that it gets resolved.

[Dylan]

Happy to help

Same, I hope that simply add an external property or something to the <Button> component, that seems like the more straightforward way to handle this kind of behavior.

In a perfect world, we could run our apps in an embedded iframe in the checkout so that way we don’t have to have the customer jump to a different tab, I’m sure that hurts conversion rates.