--- title: Link description: >- Make text interactive for navigation or in-text actions, such as product links, external references, or anchor jumps. api_version: 2026-01 api_name: checkout-ui-extensions source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/web-components/actions/link md: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/web-components/actions/link.md --- # Link The link component makes text interactive, allowing buyers 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/checkout-ui-extensions/2026-01/web-components/actions/button) instead. Links don't support a `disabled` state. If you need a disableable interactive element, use a [button](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/web-components/actions/button) instead. ### Support Targets (29) ### Supported targets * [purchase.​checkout.​actions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/navigation#navigation-target) * [purchase.​checkout.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/block#block-target) * [purchase.​checkout.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/order-summary#line-item-targets) * [purchase.​checkout.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/order-summary#checkout-cart-line-list-) * [purchase.​checkout.​contact.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/information#information-target) * [purchase.​checkout.​delivery-address.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/shipping#render-after-delivery-address-) * [purchase.​checkout.​delivery-address.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/shipping#delivery-address-targets) * [purchase.​checkout.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/footer#footer-target) * [purchase.​checkout.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/header#header-target) * [purchase.​checkout.​payment-method-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/payment#render-after-payment-methods-) * [purchase.​checkout.​payment-method-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/payment#payment-targets) * [purchase.​checkout.​pickup-location-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/local-pickup#render-after-pickup-locations-) * [purchase.​checkout.​pickup-location-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/local-pickup#location-list-targets) * [purchase.​checkout.​pickup-location-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/local-pickup#location-option-item-target) * [purchase.​checkout.​pickup-point-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/pickup-points#render-after-pickup-points-) * [purchase.​checkout.​pickup-point-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/pickup-points#pickup-points-targets) * [purchase.​checkout.​reductions.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/order-summary#checkout-reductions-after-) * [purchase.​checkout.​reductions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/order-summary#reductions-targets) * [purchase.​checkout.​shipping-option-item.​details.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/shipping#shipping-option-item-targets) * [purchase.​checkout.​shipping-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/shipping#render-after-shipping-option-) * [purchase.​checkout.​shipping-option-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/shipping#render-after-shipping-options-) * [purchase.​checkout.​shipping-option-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/checkout/shipping#shipping-option-list-targets) * [purchase.​thank-you.​announcement.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/thank-you/announcement#thank-you-announcement-) * [purchase.​thank-you.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/thank-you/block#block-target) * [purchase.​thank-you.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/thank-you/order-summary#line-item-targets) * [purchase.​thank-you.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/thank-you/order-summary#thank-you-cart-line-list-) * [purchase.​thank-you.​customer-information.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/thank-you/information#information-target) * [purchase.​thank-you.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/thank-you/footer#footer-target) * [purchase.​thank-you.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/targets/thank-you/header#header-target) #### Use cases * **Policy navigation**: Direct buyers 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 checkout. * **New-tab navigation**: Open external pages in a separate tab with `target="_blank"` so buyers don't lose their checkout progress. *** ## Properties Configure the following properties on the link component. * **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. * **command** **'--auto' | '--show' | '--hide' | '--toggle' | '--copy'** **Default: '--auto'** Sets the action the `commandFor` target should take when this component is activated. * `--auto`: Performs the default action for the target component. * `--show`: Displays the target component. * `--hide`: Conceals the target component. * `--toggle`: Alternates the target component. * `--copy`: Copies the target ClipboardItem. 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 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. * **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 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](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) (`Subtag` label) * **target** **'auto' | '\_blank'** **Default: 'auto'** Specifies where to display the linked URL. * **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. ### 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\** 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 & TData): 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 Add a text link that navigates to an external page. This example displays an `s-link` pointing to a privacy policy URL. ## Link to a privacy policy ![A rendered example of the link component](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/link-default-CFO8aYpO.png) ## html ```html Privacy policy ``` ### Open a link in a new tab Navigate to an external page without leaving checkout by opening it in a separate tab. This example shows an `s-link` with `target="_blank"` for a terms of service page. ## html ```html Terms of service ``` ### Trigger a modal from a link Open a modal without navigating away from checkout. This example uses an `s-link` with `commandFor` and `command="--show"` connected to a modal's `id`. ## html ```html View details Your order includes free shipping on all items. ``` *** ## Best practices * **Use links for navigation**: Reserve links for actions that navigate. For state-changing actions, use [button](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/web-components/actions/button) instead. * **Open external URLs in new tabs**: Set `target="_blank"` for external destinations so buyers don't lose their checkout progress. * **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 `