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 makes text interactive, allowing users to navigate to other pages or perform specific actions. Use link for navigation, external references, or triggering actions while maintaining standard link semantics and accessibility.

Support

Targets (25)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the Link component.

Anchor to accessibilityLabel accessibilityLabel string: A label that describes the purpose or content of the link for users of assistive technologies such as screen readers. When set, any children supplied to this component won't be announced to screen reader users.
Anchor to activateAction activateAction 'auto' | 'copy' Default: 'auto' - a default action for the target component.: Sets the action the activateTarget should take when this component is activated.

Supported actions by component:

Component Supported Actions Default ('auto')
ClipboardItem 'copy' 'copy'
Anchor to activateTarget activateTarget string: The ID of the component to control when this component is activated. Pair with the activateAction property to specify what action to perform on the target component.
Anchor to appearance appearance 'monochrome': The color treatment of the link. 'monochrome' inherits the color of its parent element.
Anchor to external external boolean: Whether to open the link in a new window or tab. Links to domains other than your storefront always open in a new tab regardless of this setting.
Anchor to id id string: A unique identifier for the element. Typically used as a target for another component's controls to associate an accessible label with an action.
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. See the reference of values (Subtag label).
Anchor to onPress onPress () => void: A callback fired when the link is activated. If to is set, the callback fires first, then navigation occurs.
Anchor to overlay overlay RemoteFragment: An overlay component to render when the user interacts with the component, such as a popover, modal, or tooltip.
Anchor to to to string: The URL to navigate to when the link is activated. You must provide either this property, onPress, or both.
Anchor to toggles toggles string: The ID of the component whose visibility will be toggled when this component is activated. Use this to show or hide related content like a disclosure panel.

Component	Supported Actions	Default ('auto')
`ClipboardItem`	'copy'	'copy'

Anchor to ExamplesExamples

Anchor to Link to a pageLink to a page

Add a text link that navigates to an external page. This example displays a link pointing to a sustainability fund URL.

Link to a page

Link to a page

import {

reactExtension,

Link,

} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(

'customer-account.page.render',

() => <Extension />,

);

function Extension() {

return (

Sustainability fund

</Link>

);

}

import {extension, Link} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {

const link = root.createComponent(

Link,

{to: 'https://www.shopify.ca/climate/sustainability-fund'},

'Sustainability fund',

);

root.appendChild(link);

});

React

import {
  reactExtension,
  Link,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Link to="https://www.shopify.ca/climate/sustainability-fund">
      Sustainability fund
    </Link>
  );
}

JS

import {extension, Link} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  const link = root.createComponent(
    Link,
    {to: 'https://www.shopify.ca/climate/sustainability-fund'},
    'Sustainability fund',
  );

  root.appendChild(link);
});

Anchor to Open a link in a new tabOpen a link in a new tab

Navigate to an external page without leaving the current page by opening it in a separate tab. This example shows a link with the external prop for a terms of service page.

Open a link in a new tab

import {

reactExtension,

Link,

} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(

'customer-account.page.render',

() => <Extension />,

);

function Extension() {

return (

</Link>

);

}

import {extension, Link} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {

const link = root.createComponent(

Link,

{to: 'https://www.shopify.com/legal/terms', external: true},

'Terms of service',

);

root.appendChild(link);

});

React

import {
  reactExtension,
  Link,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Link to="https://www.shopify.com/legal/terms" external>
      Terms of service
    </Link>
  );
}

JS

import {extension, Link} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  const link = root.createComponent(
    Link,
    {to: 'https://www.shopify.com/legal/terms', external: true},
    'Terms of service',
  );

  root.appendChild(link);
});

Anchor to Use a monochrome linkUse a monochrome link

Render a link that inherits its parent's color using the appearance="monochrome" prop. This is useful for links within colored containers or banners.

Use a monochrome link

import {

reactExtension,

Link,

} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(

'customer-account.page.render',

() => <Extension />,

);

function Extension() {

return (

Learn more

</Link>

);

}

import {extension, Link} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {

const link = root.createComponent(

Link,

{to: 'https://www.shopify.com', appearance: 'monochrome'},

'Learn more',

);

root.appendChild(link);

});

React

import {
  reactExtension,
  Link,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Link to="https://www.shopify.com" appearance="monochrome">
      Learn more
    </Link>
  );
}

JS

import {extension, Link} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  const link = root.createComponent(
    Link,
    {to: 'https://www.shopify.com', appearance: 'monochrome'},
    'Learn more',
  );

  root.appendChild(link);
});

Anchor to Best practicesBest practices

Use links for navigation: Reserve links for navigation and use buttons for actions.
Consider button for standalone links: If the link isn't in a paragraph, consider using a plain button instead for a larger hit area.
Use consistently with buttons: Links and buttons include style and accessibility information. Use these components intentionally and consistently to provide a more inclusive experience.

Anchor to LimitationsLimitations

Links can't be disabled. If you need a disabled interactive element, use button instead.

Was this page helpful?