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 contents of the link. It will be read to users using assistive technologies such as screen readers.

Use this when using only an icon or the content of the link is not enough context for users using assistive technologies.
Anchor to command command '--auto' | '--show' | '--hide' | '--toggle' | '--copy' Default: '--auto': Sets the action the commandFor target should take when this component is activated.

--auto: A default action for the target component.

--show: Shows the target component.

--hide: Hides the target component.

--toggle: Toggles the target component.

--copy: Copies the target ClipboardItem.

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 set, it will navigate to the location specified by href after executing the click event.

If a commandFor is set, the command will be executed instead of the 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 button's text content. Use this when the button text is in a different language than the rest of the page, so assistive technologies can invoke the correct pronunciation. Reference of values (Subtag label)
Anchor to target target 'auto' | '_blank' Default: 'auto': Specifies where to display the linked URL.
Anchor to tone tone 'auto' | 'neutral' Default: 'auto': Sets the tone of the link, based on the intention of the information being conveyed.

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?