Choose a version:

Link

The link component makes text interactive, allowing customers to navigate to other pages or perform specific actions. Use link for navigation, external references, or triggering actions with built-in accessibility support.

Links support standard URLs, custom protocols, navigation within Shopify admin pages, and can open in new windows for external destinations. For prominent actions or form submissions, use button instead.

Links don't support a disabled state. For a disableable interactive element, use button instead.

Support

Targets (24)

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.
Anchor to command command '--auto' | '--show' | '--hide' | '--toggle' | '--copy' Default: '--auto': Sets the action the commandFor target should take when this component is activated. Available options:

'--auto': Performs the default action appropriate for the target component.

'--show': Displays the target component if it's currently hidden.

'--hide': Conceals the target component from view.

'--toggle': Alternates the target component between visible and hidden states.

'--copy': Copies the target clipboard item.

The supported actions vary by target component type. Learn more about the command attribute.
Anchor to commandFor commandFor string: The ID of the component to control when this component is activated. Pair with the command property to specify what action to perform on the target component. Learn more about the commandFor attribute.

When both commandFor and href are set, commandFor takes precedence. The command runs and the link doesn't navigate.
Anchor to href href string: The URL to navigate to when clicked. The click event fires first, then navigation occurs. If commandFor is also set, the command executes instead of navigation.
Anchor to id id string: A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.
Anchor to interestFor interestFor string: The ID of the component to show when users hover over or focus on this component. Pair with a target component that supports interest-based interactions. Learn more about the interestFor attribute.
Anchor to lang lang 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.
Anchor to target target 'auto' | '_blank' Default: 'auto': Specifies where to display the linked URL. Learn more about the target attribute.

'auto': Opens the URL in the current frame or a new tab, depending on the context.

'_blank': Opens the URL in a new tab or window.
Anchor to tone tone 'auto' | 'neutral' Default: 'auto': The semantic meaning and color treatment of the link.

'auto': Automatically determined based on context.

'neutral': Removes the default link color, inheriting the surrounding text style.

Anchor to EventsEvents

The link component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to click click <typeof tagName>: A callback fired when the link is clicked, before navigating to the location specified by href.

Learn more about the click event.

CallbackEventListener

A typed event listener for custom element events. The listener receives a `CallbackEvent` with the correct `currentTarget` type for the associated custom element tag.

(EventListener & {
      (event: CallbackEvent<TTagName, TEvent>): void;
    }) | null

CallbackEvent

An event type that narrows the `currentTarget` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.

TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}

Anchor to ExamplesExamples

Anchor to Link to a privacy policyLink to a privacy policy

Navigate customers to a privacy policy page. This example displays an s-link pointing to a privacy policy URL.

Link to a privacy policy

A text hyperlink styled in the default link color for inline navigation.

html

<s-link href="https://www.shopify.com/ca/legal/privacy">Privacy policy</s-link>

Anchor to Open external links in a new tabOpen external links in a new tab

Navigate to external pages without leaving the current context. This example shows multiple s-link elements with target="_blank" inside a styled box.

html

<s-box padding="base" background="subdued" borderRadius="base">

<s-paragraph>

Need help? Read our <s-link href="https://www.shopify.com/legal/terms" target="_blank">terms of service</s-link> or visit the <s-link href="https://help.shopify.com" target="_blank">help center</s-link>.

</s-paragraph>

</s-box>

Anchor to Trigger a modal from a linkTrigger a modal from a link

Open a modal without navigating away from the page. This example uses an s-link with commandFor and command="--show" inline within a paragraph to open order details.

html

<s-paragraph>

Your order includes free shipping. <s-link commandFor="details-modal" command="--show">View full details</s-link>

</s-paragraph>

<s-modal id="details-modal" heading="Order details">

<s-text>Your order qualifies for free standard shipping on all items. Estimated delivery is 5-7 business days.</s-text>

</s-modal>

Anchor to Best practicesBest practices

Use links for navigation: Reserve links for actions that navigate. For state-changing actions, use button instead.
Open external URLs in new tabs: Set target="_blank" for external destinations so users don't lose their current page context.
Write descriptive text: Use link text that describes the destination, such as "Privacy policy" rather than "Click here."
Choose link or button intentionally: Use link for navigation and button for state-changing actions. The link component may render as a <button> element depending on the properties set, but it's styled as a text link.

Was this page helpful?