---
title: Link
description: >-
The link component makes text interactive, allowing users to navigate to other
pages or perform specific actions. Use link for navigation, external
references, or triggering actions while maintaining standard link semantics
and accessibility.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
html: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/link
md: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/link.md
---
Migrate to Polaris
Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.
# Link
The link component makes text interactive, allowing users to navigate to other pages or perform specific actions. Use link for navigation, external references, or triggering actions while maintaining standard link semantics and accessibility.
### Support Targets (25)
### Supported targets
* CustomerAccount::KitchenSink
* [customer-account.footer.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-)
* [customer-account.order-index.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets)
* [customer-account.order-index.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-)
* [customer-account.order-status.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-)
* [customer-account.order-status.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-)
* [customer-account.order-status.cart-line-item.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/targets/order-status#customer-information-render-after-)
* [customer-account.order-status.fulfillment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.order-status.payment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.order.action.menu-item.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-)
* [customer-account.order.action.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-)
* [customer-account.order.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-)
* [customer-account.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-)
* [customer-account.profile.addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.profile.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-)
* [customer-account.profile.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-)
* [customer-account.profile.company-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/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/2025-07/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.
* **External tab navigation**: Open external pages in a separate tab with the `external` prop 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. When set, any `children` supplied to this component won't be announced to screen reader users.
* **activateAction**
**'auto' | 'copy'**
**Default: 'auto' - a default action for the target component.**
Sets the action the `activateTarget` should take when this component is activated.
Supported actions by component:
| Component | Supported Actions | Default ('auto') |
| - | - | - |
| [`ClipboardItem`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/clipboarditem) | 'copy' | 'copy' |
* **activateTarget**
**string**
The ID of the component to control when this component is activated. Pair with the `activateAction` property to specify what action to perform on the target component.
* **appearance**
**'monochrome'**
The color treatment of the link. `'monochrome'` inherits the color of its parent element.
* **external**
**boolean**
Whether to open the link in a new window or tab. Links to domains other than your storefront always open in a new tab regardless of this setting.
* **id**
**string**
A unique identifier for the element. Typically used as a target for another component's controls to associate an accessible label with an action.
* **language**
**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, so assistive technologies can invoke the correct pronunciation. See the [reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) (`Subtag` label).
* **onPress**
**() => void**
A callback fired when the link is activated. If `to` is set, the callback fires first, then navigation occurs.
* **overlay**
**RemoteFragment**
An overlay component to render when the user interacts with the component, such as a popover, modal, or tooltip.
* **to**
**string**
The URL to navigate to when the link is activated. You must provide either this property, `onPress`, or both.
* **toggles**
**string**
The ID of the component whose visibility will be toggled when this component is activated. Use this to show or hide related content like a disclosure panel.
***
## Examples
### Link to a page
Add a text link that navigates to an external page. This example displays a link pointing to a sustainability fund URL.
## Link to a page
## Link to a page
##### React
```tsx
import {
reactExtension,
Link,
} from '@shopify/ui-extensions-react/customer-account';
export default reactExtension(
'customer-account.page.render',
() => ,
);
function Extension() {
return (
Sustainability fund
);
}
```
##### JS
```js
import {extension, Link} from '@shopify/ui-extensions/customer-account';
export default extension('customer-account.page.render', (root) => {
const link = root.createComponent(
Link,
{to: 'https://www.shopify.ca/climate/sustainability-fund'},
'Sustainability fund',
);
root.appendChild(link);
});
```
### Open a link in a new tab
Navigate to an external page without leaving the current page by opening it in a separate tab. This example shows a link with the `external` prop for a terms of service page.
## Open a link in a new tab
##### React
```tsx
import {
reactExtension,
Link,
} from '@shopify/ui-extensions-react/customer-account';
export default reactExtension(
'customer-account.page.render',
() => ,
);
function Extension() {
return (
Terms of service
);
}
```
##### JS
```js
import {extension, Link} from '@shopify/ui-extensions/customer-account';
export default extension('customer-account.page.render', (root) => {
const link = root.createComponent(
Link,
{to: 'https://www.shopify.com/legal/terms', external: true},
'Terms of service',
);
root.appendChild(link);
});
```
### Use a monochrome link
Render a link that inherits its parent's color using the `appearance="monochrome"` prop. This is useful for links within colored containers or banners.
## Use a monochrome link
##### React
```tsx
import {
reactExtension,
Link,
} from '@shopify/ui-extensions-react/customer-account';
export default reactExtension(
'customer-account.page.render',
() => ,
);
function Extension() {
return (
Learn more
);
}
```
##### JS
```js
import {extension, Link} from '@shopify/ui-extensions/customer-account';
export default extension('customer-account.page.render', (root) => {
const link = root.createComponent(
Link,
{to: 'https://www.shopify.com', appearance: 'monochrome'},
'Learn more',
);
root.appendChild(link);
});
```
***
## Best practices
* **Use links for navigation**: Reserve links for navigation and use buttons for actions.
* **Consider button for standalone links**: If the link isn't in a paragraph, consider using a plain button instead for a larger hit area.
* **Use consistently with buttons**: Links and buttons include style and accessibility information. Use these components intentionally and consistently to provide a more inclusive experience.
***
## Limitations
* Links can't be disabled. If you need a disabled interactive element, use [button](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/button) instead.
***