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

dylanpierce
Shopify Partner
206 3 91

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.

 

CleanShot 2024-02-04 at 07.25.34@2x.png

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.

Founder of Real ID - Verify your customer's real IDs easily & securely with modern AI
Reply 1 (1)

Liam
Shopify Staff
2731 292 743

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. 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog