Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

Link

The Link component lets merchants navigate to a URL or trigger an action when pressed. Links render as inline text styled to indicate interactivity, and support custom tones and accessibility labels.

For action-oriented interactions like submitting or deleting, use Button. To make a custom area clickable with layout control, use Pressable.

Support

Targets (46)

Supported targets

Anchor to PropertiesProperties

Props for the Link component, an interactive text element that navigates to a URL or triggers an action when pressed. Inherits accessibility label support from AccessibilityLabelProps.

Anchor to accessibilityLabel accessibilityLabel string: A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. When set, any children or label supplied won't be announced to screen readers.
Anchor to href href string: The URL to link to. If set, the link will navigate to the specified location after executing the onClick callback. Use this prop for standard navigation links within or outside the Shopify admin.
Anchor to id id string: A unique identifier for the link. When not set, a globally unique value will be used instead.
Anchor to lang lang string: An alias for language. The language of the link's text content. Use this when the link text is in a different language than the rest of the page so assistive technologies can invoke the correct pronunciation. Must be a valid IANA language subtag.
Anchor to language language string: The language of the link's text content. Use this when the link text is in a different language than the rest of the page so assistive technologies can invoke the correct pronunciation. Must be a valid IANA language subtag.
Anchor to onClick onClick () => void: A callback that fires when the link is pressed. If href is set, the callback executes first and then the link navigates to the specified location.
Anchor to onPress onPress () => void: An alias for onClick. A callback that fires when the link is pressed. If href is set, the callback executes first and then the link navigates to the specified location.
Anchor to target target '_blank' | '_self' Default: '_self': The browsing context for opening the linked URL.

_blank: Opens the link in a new tab or window.

_self: Opens the link in the current page (default behavior).
Anchor to to to string: An alias for href. If set, the link will navigate to the specified location after executing the onClick callback.
Anchor to tone tone 'default' | 'inherit' | 'critical' Default: 'default': The color of the link text.

default: Uses the standard link color to indicate an interactive element.

inherit: Takes the color value from its parent, giving the link a monochrome appearance. Pair this with another stylistic treatment, like an underline, to differentiate the link from normal text.

critical: Uses a critical (destructive) color to indicate a potentially dangerous action, such as deleting a resource.

Anchor to ExamplesExamples

Anchor to Navigate to app pagesNavigate to app pages

Navigate to extension settings and a sync dashboard without leaving the admin. This example uses Link with extension:// URLs to open internal extension pages from a product details block.

Navigate to app pages

import {reactExtension, Link, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

return (

<Text fontWeight="bold">Manage this product</Text>

<Link href="extension://settings">Extension settings</Link>

<Link href="extension://dashboard">Sync dashboard</Link>

</BlockStack>

);

}

export default reactExtension(

'admin.product-details.block.render',

() => <App />,

);

import {extension, Link, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(

'admin.product-details.block.render',

(root) => {

const stack = root.createComponent(BlockStack, {gap: true});

const heading = root.createComponent(Text, {fontWeight: 'bold'}, 'Manage this product');

const settingsLink = root.createComponent(

Link,

{href: 'extension://settings'},

'Extension settings',

);

const dashboardLink = root.createComponent(

Link,

{href: 'extension://dashboard'},

'Sync dashboard',

);

stack.appendChild(heading);

stack.appendChild(settingsLink);

stack.appendChild(dashboardLink);

root.appendChild(stack);

);

React

import {reactExtension, Link, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

  return (
    <BlockStack gap>
      <Text fontWeight="bold">Manage this product</Text>
      <Link href="extension://settings">Extension settings</Link>
      <Link href="extension://dashboard">Sync dashboard</Link>
    </BlockStack>
  );
}

export default reactExtension(
  'admin.product-details.block.render',
  () => <App />,
);

TS

import {extension, Link, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
  'admin.product-details.block.render',
  (root) => {

    const stack = root.createComponent(BlockStack, {gap: true});

    const heading = root.createComponent(Text, {fontWeight: 'bold'}, 'Manage this product');

    const settingsLink = root.createComponent(
      Link,
      {href: 'extension://settings'},
      'Extension settings',
    );

    const dashboardLink = root.createComponent(
      Link,
      {href: 'extension://dashboard'},
      'Sync dashboard',
    );

    stack.appendChild(heading);
    stack.appendChild(settingsLink);
    stack.appendChild(dashboardLink);
    root.appendChild(stack);
  },
);

Anchor to Open external links in new tabsOpen external links in new tabs

Open external URLs in new tabs using target="_blank". This example links to the product's storefront page and Shopify documentation, building the storefront URL from the product ID in data.selected.

Open external links in new tabs

import {reactExtension, useApi, Link, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

const {data} = useApi('admin.product-details.block.render');

const productId = data.selected[0]?.id;

const numericId = productId?.split('/').pop();

return (

<Text fontWeight="bold">External resources</Text>

<Link

href={`https://your-store.myshopify.com/products/${numericId}`}

target="_blank"

View on storefront

</Link>

Shopify product documentation

</Link>

</BlockStack>

);

}

export default reactExtension(

'admin.product-details.block.render',

() => <App />,

);

import {extension, Link, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(

'admin.product-details.block.render',

(root, api) => {

const {data} = api;

const productId = data.selected[0]?.id;

const numericId = productId?.split('/').pop();

const stack = root.createComponent(BlockStack, {gap: true});

const heading = root.createComponent(Text, {fontWeight: 'bold'}, 'External resources');

const storefrontLink = root.createComponent(

Link,

{

href: `https://your-store.myshopify.com/products/${numericId}`,

target: '_blank',

'View on storefront',

);

const docsLink = root.createComponent(

Link,

{

href: 'https://help.shopify.com/manual/products',

target: '_blank',

'Shopify product documentation',

);

stack.appendChild(heading);

stack.appendChild(storefrontLink);

stack.appendChild(docsLink);

root.appendChild(stack);

);

React

import {reactExtension, useApi, Link, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {
  const {data} = useApi('admin.product-details.block.render');
  const productId = data.selected[0]?.id;
  const numericId = productId?.split('/').pop();

  return (
    <BlockStack gap>
      <Text fontWeight="bold">External resources</Text>
      <Link
        href={`https://your-store.myshopify.com/products/${numericId}`}
        target="_blank"
      >
        View on storefront
      </Link>
      <Link href="https://help.shopify.com/manual/products" target="_blank">
        Shopify product documentation
      </Link>
    </BlockStack>
  );
}

export default reactExtension(
  'admin.product-details.block.render',
  () => <App />,
);

TS

import {extension, Link, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
  'admin.product-details.block.render',
  (root, api) => {
    const {data} = api;
    const productId = data.selected[0]?.id;
    const numericId = productId?.split('/').pop();

    const stack = root.createComponent(BlockStack, {gap: true});

    const heading = root.createComponent(Text, {fontWeight: 'bold'}, 'External resources');

    const storefrontLink = root.createComponent(
      Link,
      {
        href: `https://your-store.myshopify.com/products/${numericId}`,
        target: '_blank',
      },
      'View on storefront',
    );

    const docsLink = root.createComponent(
      Link,
      {
        href: 'https://help.shopify.com/manual/products',
        target: '_blank',
      },
      'Shopify product documentation',
    );

    stack.appendChild(heading);
    stack.appendChild(storefrontLink);
    stack.appendChild(docsLink);
    root.appendChild(stack);
  },
);

Anchor to Link to Shopify admin sectionsLink to Shopify admin sections

Navigate to Shopify admin pages using the shopify:// protocol. This example links to the orders list, the product's inventory page, and the product editor, using tone="critical" on the edit link to draw attention to it.

Link to Shopify admin sections

import {reactExtension, useApi, Link, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

const {data} = useApi('admin.product-details.block.render');

const productId = data.selected[0]?.id;

const numericId = productId?.split('/').pop();

return (

<Text fontWeight="bold">Admin navigation</Text>

<Link href="shopify://admin/orders">View all orders</Link>

Manage inventory

</Link>

Edit product (admin)

</Link>

</BlockStack>

);

}

export default reactExtension(

'admin.product-details.block.render',

() => <App />,

);

import {extension, Link, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(

'admin.product-details.block.render',

(root, api) => {

const {data} = api;

const productId = data.selected[0]?.id;

const numericId = productId?.split('/').pop();

const stack = root.createComponent(BlockStack, {gap: true});

const heading = root.createComponent(Text, {fontWeight: 'bold'}, 'Admin navigation');

const ordersLink = root.createComponent(

Link,

{href: 'shopify://admin/orders'},

'View all orders',

);

const inventoryLink = root.createComponent(

Link,

{href: `shopify://admin/products/${numericId}/inventory`},

'Manage inventory',

);

const criticalLink = root.createComponent(

Link,

{

href: `shopify://admin/products/${numericId}`,

tone: 'critical',

'Edit product (admin)',

);

stack.appendChild(heading);

stack.appendChild(ordersLink);

stack.appendChild(inventoryLink);

stack.appendChild(criticalLink);

root.appendChild(stack);

);

React

import {reactExtension, useApi, Link, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {
  const {data} = useApi('admin.product-details.block.render');
  const productId = data.selected[0]?.id;
  const numericId = productId?.split('/').pop();

  return (
    <BlockStack gap>
      <Text fontWeight="bold">Admin navigation</Text>
      <Link href="shopify://admin/orders">View all orders</Link>
      <Link href={`shopify://admin/products/${numericId}/inventory`}>
        Manage inventory
      </Link>
      <Link href={`shopify://admin/products/${numericId}`} tone="critical">
        Edit product (admin)
      </Link>
    </BlockStack>
  );
}

export default reactExtension(
  'admin.product-details.block.render',
  () => <App />,
);

TS

import {extension, Link, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
  'admin.product-details.block.render',
  (root, api) => {
    const {data} = api;
    const productId = data.selected[0]?.id;
    const numericId = productId?.split('/').pop();

    const stack = root.createComponent(BlockStack, {gap: true});

    const heading = root.createComponent(Text, {fontWeight: 'bold'}, 'Admin navigation');

    const ordersLink = root.createComponent(
      Link,
      {href: 'shopify://admin/orders'},
      'View all orders',
    );

    const inventoryLink = root.createComponent(
      Link,
      {href: `shopify://admin/products/${numericId}/inventory`},
      'Manage inventory',
    );

    const criticalLink = root.createComponent(
      Link,
      {
        href: `shopify://admin/products/${numericId}`,
        tone: 'critical',
      },
      'Edit product (admin)',
    );

    stack.appendChild(heading);
    stack.appendChild(ordersLink);
    stack.appendChild(inventoryLink);
    stack.appendChild(criticalLink);
    root.appendChild(stack);
  },
);

Anchor to Best practicesBest practices

Use descriptive link text: Write link text that clearly describes where the link goes or what it does. Avoid vague labels like "Click here" or "Learn more" without additional context. Screen readers often navigate by listing all links on a page, so each link should make sense on its own.
Choose the right component for the action: Use Link for navigation and Button for actions. If the interaction changes data or triggers a process (like saving or deleting), use a Button instead of a Link.
Use target="_blank" sparingly: Opening links in a new tab can be disorienting. Only use target="_blank" for links that take the merchant away from an in-progress workflow, such as linking to external documentation.

Anchor to LimitationsLimitations

Links to external domains outside of the Shopify admin might be blocked or display a redirect confirmation page depending on the merchant's browser settings and the extension context.
The Link component renders inline with surrounding text. To create a block-level clickable area with custom layout, use the Pressable component instead.
The onClick callback fires before navigation occurs. If the callback throws an error, navigation might still proceed. You can't use onClick to conditionally prevent navigation.

Was this page helpful?