Link

Deprecated

Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to purchase options extensions.

Links take users to another place, and usually appear within or directly following a sentence.

import {extend, Link} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {

const productLink = root.createComponent(Link, {

url: '/admin/products/12345',

});

productLink.appendChild('View product');

root.appendChild(productLink);

root.mount();

});

import React from 'react';

import {extend, render, Link} from '@shopify/admin-ui-extensions-react';

function App() {

return <link url="/admin/products/12345" />View product;

}

extend(

'Playground',

render(() => <App />),

);

import {extend, Link} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const productLink = root.createComponent(Link, {
    url: '/admin/products/12345',
  });
  productLink.appendChild('View product');

  root.appendChild(productLink);

  root.mount();
});

import React from 'react';
import {extend, render, Link} from '@shopify/admin-ui-extensions-react';

function App() {
  return <link url="/admin/products/12345" />View product;
}

extend(
  'Playground',
  render(() => <App />),
);

Anchor to PropsProps

optional = ?

Name	Type	Description
onPress?	`() => void`	Callback when the link is pressed.
external?	`boolean`	Open the link in a new tab on desktop, or in the device browser on mobile.
url?	`string`	A relative path or absolute URL to link to.

Anchor to GuidelinesGuidelines

📱 Only nest Text within Link. Other components will be ignored. Nested Text components can be used to render the content of the Link

✅ Do	🛑 Don't
📱 Use `external` to launch URLs with the device browser	Inject Javascript into the URL. This will be blocked.
🖥 Use `external` to launch URLs in a new browser tab. Use HTTPS for URLs.

For more guidelines, refer to Polaris' Link best practices.

Was this page helpful?