---
title: Link
description: >-
  Link makes text interactive so customers can perform an action, such as
  navigating to another location.
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

Link makes text interactive so customers can perform an action, such as navigating to another location.

### Support Targets (25)

### Supported targets

* Customer​Account::Kitchen​Sink
* customer-account.​footer.​render-after
* customer-account.​order-index.​announcement.​render
* customer-account.​order-index.​block.​render
* customer-account.​order-status.​announcement.​render
* customer-account.​order-status.​block.​render
* customer-account.​order-status.​cart-line-item.​render-after
* customer-account.​order-status.​cart-line-list.​render-after
* customer-account.​order-status.​customer-information.​render-after
* customer-account.​order-status.​fulfillment-details.​render-after
* customer-account.​order-status.​payment-details.​render-after
* customer-account.​order-status.​return-details.​render-after
* customer-account.​order-status.​unfulfilled-items.​render-after
* customer-account.​order.​action.​menu-item.​render
* customer-account.​order.​action.​render
* customer-account.​order.​page.​render
* customer-account.​page.​render
* customer-account.​profile.​addresses.​render-after
* customer-account.​profile.​announcement.​render
* customer-account.​profile.​block.​render
* customer-account.​profile.​company-details.​render-after
* customer-account.​profile.​company-location-addresses.​render-after
* customer-account.​profile.​company-location-payment.​render-after
* customer-account.​profile.​company-location-staff.​render-after
* customer-account.​profile.​payment.​render-after

## LinkProps

* **accessibilityLabel**

  **string**

  A label used for buyers using assistive technologies. When set, any `children` supplied to this component will not 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 pressable 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**

  ID of a component that should respond to activations (e.g. clicks) on this pressable.

  See `activateAction` for how to control the behavior of the target.

* **appearance**

  **Extract\<Appearance, 'monochrome'>**

  Specify the color of the link. `monochrome` will take the color of its parent.

* **external**

  **boolean**

  Open the link in a new window or tab. If the link points to a domain other than your Storefront, it will always open in a new tab.

* **id**

  **string**

  Unique identifier.

  Typically used as a target for another component’s controls to associate an accessible label with an action.

* **language**

  **string**

  Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label)

* **onPress**

  **() => void**

  Callback when pressed. If `to` is set, it will execute the callback and then navigate to the location specified by `to`.

* **overlay**

  **RemoteFragment**

  An overlay component to render when the user interacts with the component.

* **to**

  **string**

  Destination to navigate to. You must provide either this property, `onPress`, or both.

* **toggles**

  **string**

  The component's identifier whose visibility will be toggled when this component is actioned.

### Appearance

A keyword that maps to a predefined color or visual treatment from the design system. Used to convey meaning or emphasis through color. - \`base\`: The default color for the element set within the theme. - \`accent\`: Conveys emphasis and draws attention to the element. - \`decorative\`: Uses the \`decorative\` color set within the theme. - \`interactive\`: Conveys that the element is pressable or hoverable. Deprecated; use \`accent\` instead. - \`subdued\`: Conveys a subdued or disabled state. - \`info\`: Conveys informational content. - \`success\`: Conveys a successful interaction. - \`warning\`: Conveys something needs attention or action. - \`critical\`: Conveys a problem has arisen. - \`monochrome\`: Takes the color of its parent, giving a uniform appearance.

```ts
'base' | 'accent' | 'decorative' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'
```

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/link-default-D5S5Hj80.png)

### Examples

* #### Basic Link

  ##### React

  ```tsx
  import {
    reactExtension,
    Link,
  } from '@shopify/ui-extensions-react/customer-account';

  export default reactExtension(
    'customer-account.page.render',
    () => <Extension />,
  );

  function Extension() {
    return (
      <Link to="https://www.shopify.ca/climate/sustainability-fund">
        Sustainability fund
      </Link>
    );
  }
  ```

  ##### 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);
  });
  ```

## Appearance

| Value | Description |
| - | - |
| `"monochrome"` | Takes the color of its parent. |

## Best Practices

* If the link isn’t in a paragraph, then consider using a plain button instead for a larger hit area.

* Use links primarily for navigation and use buttons primarily for actions.

* The HTML that renders for the Button and `Link` components includes style and accessibility information. Use these components intentionally and consistently to provide a more inclusive experience for assistive technology users and a more cohesive visual experience for sighted users.

## Related

[Component - Button](button)