Skip to main content
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.

Link

Link makes text interactive so buyers can perform an action, such as navigating to another location.

Support
Targets (50)

Supported targets

Anchor to LinkPropsLinkProps

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:

ComponentSupported ActionsDefault ('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.

Anchor to ExamplesExamples

Anchor to Basic LinkBasic Link

Basic Link

Example

Basic Link

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

export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
return (
<Link to="https://www.shopify.ca/climate/sustainability-fund">
Sustainability fund
</Link>
);
}
import {extension, Link} from '@shopify/ui-extensions/checkout';

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

root.appendChild(link);
});

Anchor to AppearanceAppearance

ValueDescription
"monochrome"Takes the color of its parent.

Anchor to Best PracticesBest Practices

  • If the link isn’t in a paragraph, then consider using a plain button instead for a larger hit area.

  • Use links primarily for navigation and use buttons primarily for actions.

  • The HTML that renders for the Button and Link components includes style and accessibility information. Use these components intentionally and consistently to provide a more inclusive experience for buyers using assistive technology and a more cohesive visual experience for sighted buyers.

Anchor to RelatedRelated

ComponentButton
Was this page helpful?