External URL support for `<Button>` components

Extensions
1

Hi there,

I’ve made a corresponding Github Issue about this UX issue but since we have a new shiny forum, I figured I’ll post it here.

Summary

As a developer, I wish I could pass a url property to a <Button> component, and it will still render as a button not a link.

Current Behavior

As a developer, if I pass a url property to a <Button> component, it will render as a link instead.

Why is this a problem?

Our application makes use of the customer’s camera as well as A.I. models running within the customer’s browser. This functionality isn’t possible in Shopify Extensions natively.

Therefore, we need to open a new window on the customer’s browser so they can complete the task, then we close the tab and they can continue through checkout.

Current workaround

Our current workaround is to use a <Pressable> component, which can open a URL, but this isn’t ideal because it doesn’t match the same design as a standard button.

We humbly request that the <Button> component’s url property behavior is changed to maintain the button styling, and open the URL as a new tab on the customer’s device.

2 Likes
2

[Opinion] Auto opening a URL would end up as a bad experience, especially in checkout. Prompting the user to click on a button to open a full screen experience is a better way to do things since it gives them the understanding that they now need to use a camera for whatever processing / task that you need to do, and then callback to checkout

3 Likes
3

Hi Dylan!

I’m not sure I fully understand as we offer the ability to link to external websites using <button> components but we don’t offer the ability to open them in a new tab except for Links. There is a workaround specified here: Add `external` prop to button component · Issue #1835 · Shopify/ui-extensions · GitHub.

Let me know if that works for your use-case.

2 Likes
4

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>
1 Like
5

Agreed, but I’m not sure where you’re reading that any auto-opening of links is happening.

6

Therefore, we need to open a new window on the customer’s browser so they can complete the task, then we close the tab and they can continue through checkout.

My bad, I read it as “We need to automatically open a window”

1 Like