---
title: Link
description: >-
  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.
api_version: 2026-04
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/link
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/link.md
---

# 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](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/button) instead.

Links don't support a `disabled` state. For a disableable interactive element, use [button](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/button) instead.

### Support Targets (24)

### Supported targets

* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-announcement-)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-item-render-after-)
* [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-list-render-after-)
* [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#return-details-render-after-)
* [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.​profile.​payment.​render-after

#### Use cases

* **Policy navigation**: Direct customers to privacy policies, terms of service, or return policy pages.
* **External references**: Link to external resources like tracking pages, support articles, or partner sites.
* **Modal triggers**: Open overlays or modals using the `commandFor` and `command` attributes without navigating away from the page.
* **New-tab navigation**: Open external pages in a separate tab with `target="_blank"` so customers don't lose their current context.

***

## Properties

Configure the following properties on the link component.

* **accessibilityLabel**

  **string**

  A label that describes the purpose or content of the link for users of assistive technologies such as screen readers.

* **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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).

* **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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).

  When both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.

* **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.

* **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.

* **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](https://open-ui.org/components/interest-invokers.explainer/#the-pitch-in-code).

* **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.

* **target**

  **'auto' | '\_blank'**

  **Default: 'auto'**

  Specifies where to display the linked URL. Learn more about the [target attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).

  * `'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.

* **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.

### Events

The link component provides event callbacks for handling user interactions. Learn more about [handling events](https://shopify.dev/docs/api/polaris/using-polaris-web-components#handling-events).

* **click**

  **CallbackEventListener\<typeof tagName>**

  A callback fired when the link is clicked, before navigating to the location specified by `href`.

  Learn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/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.

```ts
(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.

```ts
TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}
```

***

## Examples

### Link 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.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/link-default-CFO8aYpO.png)

## html

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

### Open 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

```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>
```

### Trigger 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

```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>
```

***

## Best practices

* **Use links for navigation**: Reserve links for actions that navigate. For state-changing actions, use [button](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/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.

***