<Button> onPress component open new tab or style a <Link> as a button

[dylanpierce]

Our goal is to create a simple button in a Checkout Extension that opens a new tab.

The Components UI doesn't support the components we need for the main value prop of the app. Therefore, we have to temporarily move the customer to a new tab to render our app for a short period of time before redirecting them back to the checkout by closing out our tab.

The problem we're facing is that `<Button>` elements can only open external links via the `to` prop. However, if a `<Button>` only has a `to` prop instead of an `onPress`, the `<Button>` will render as a `<Link>` instead.

This a big issue because it's not clear that clicking this link this is the primary CTA for the extension.

Is there any way to use a <Button> onPress to open a new tab?

The window object isn’t accessible within the Checkout UI worker thread.

 

So you’re limited to using a to parameter, which isn’t a good experience because <Button>’s that only have a to field are rendered as inline <a>’s without proper styling to make it the primary CTA of the checkout extension.

This may force us to wrap an `<Image>` of a button with a `<Link>` to get the behavior we need. Which is not ideal because it bypasses the branding API.

We're also experimenting with hacking the `<Pressable>` to make a pseudo button, but the styling is very limited.

[Liam]

Hi Dylan - as you've noted the window object isn’t accessible within checkout extensions so this will make it challenging to trigger the opening of a new tab. I've connected with the product team working on this to let them know your usecase and how our limitations are affecting the functionality of your app. 

[DarianBia]

Hello, Liam 👋 Do you know if there was any traction on this?

I'm stumbling into this issue with Upsells on the checkout, the use case is that one of the merchants wants the upsells to be clickable to go to the product page to get more info but they also do not want them to navigate away from the checkout entirely to potentially lose a sale, so a new tab would be ideal.

Thank you!

[Luftwalk]

Also interested in this. One of the manual payment options needs to access their own portal to approve a customer.

What do we do? A button with a "to" doesn't really stand out

[JohnWF]

Also interested in this. Pressable says it's good for replacing a Link when Link styling isn't desirable, but then how do we actually link somewhere?

EDIT: lol it's the exact same attribute, "to". It can do exactly this and it works, e.g.

<Pressable to={ url }>

 Documentation