--- title: Link description: >- Make text interactive for navigation or in-text actions, such as product links, external references, or anchor jumps. api_version: 2026-07-rc source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/actions/link md: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/actions/link.md api_name: checkout-ui-extensions --- # 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-07-rc/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-07-rc/web-components/actions/button) instead. ### Support Targets (29) ### Supported targets * [purchase.​checkout.​actions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/navigation#navigation-target) * [purchase.​checkout.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/block#block-target) * [purchase.​checkout.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#line-item-targets) * [purchase.​checkout.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#checkout-cart-line-list-) * [purchase.​checkout.​contact.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/information#information-target) * [purchase.​checkout.​delivery-address.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-delivery-address-) * [purchase.​checkout.​delivery-address.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#delivery-address-targets) * [purchase.​checkout.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/footer#footer-target) * [purchase.​checkout.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/header#header-target) * [purchase.​checkout.​payment-method-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/payment#render-after-payment-methods-) * [purchase.​checkout.​payment-method-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/payment#payment-targets) * [purchase.​checkout.​pickup-location-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#render-after-pickup-locations-) * [purchase.​checkout.​pickup-location-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#location-list-targets) * [purchase.​checkout.​pickup-location-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#location-option-item-target) * [purchase.​checkout.​pickup-point-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/pickup-points#render-after-pickup-points-) * [purchase.​checkout.​pickup-point-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/pickup-points#pickup-points-targets) * [purchase.​checkout.​reductions.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#checkout-reductions-after-) * [purchase.​checkout.​reductions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#reductions-targets) * [purchase.​checkout.​shipping-option-item.​details.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#shipping-option-item-targets) * [purchase.​checkout.​shipping-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-shipping-option-) * [purchase.​checkout.​shipping-option-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-shipping-options-) * [purchase.​checkout.​shipping-option-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#shipping-option-list-targets) * [purchase.​thank-you.​announcement.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/announcement#thank-you-announcement-) * [purchase.​thank-you.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/block#block-target) * [purchase.​thank-you.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/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-07-rc/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-07-rc/targets/thank-you/information#information-target) * [purchase.​thank-you.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/footer#footer-target) * [purchase.​thank-you.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/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 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\** 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-07-rc/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 `