---
title: Link
description: Link is used to navigate the buyer to another page.
api_name: checkout-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/link
  md: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/link.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/link.md#props)
* [Best practices](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/link.md#best-practices)
* [Related components](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/link.md#related-components)

# Link

Link is used to navigate the buyer to another page.

***

### Example

![link](https://shopify.dev/assets/assets/images/api/checkout-extensions/post-purchase/components/link-CDnCJK8K.png)

##### JS

```ts
import {extend, Link} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const link = root.createComponent(
    Link,
    {
      to: 'https://shopify.com',
    },
    'Shopify',
  );

  root.appendChild(link);
});
```

##### React

```tsx
import {render, Link} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return <Link to="https://shopify.com">Shopify</Link>;
}
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| to? | `string` | Destination to navigate to. You **must** provide either this property, `onPress`, or both. |
| external? | `boolean` | Open the link in a new window or tab |
| id? | `string` | Unique identifier. Typically used as a target for another component's controls to associate an accessible label with an action. |
| onPress? | `() => void` | Callback when pressed. If `to` is provided, it will execute the callback and then navigate to the location specified by `to`. |

***

## Best practices

* If the link isn't in a paragraph, consider using a plain button instead to get a larger hit area.
* Use links primarily for navigation and button primarily for actions.
* The HTML that renders for the Button and Link components carries meaning. Using these components intentionally and consistently results in a more inclusive experience for assistive technology users and a more cohesive visual experience for sighted users.

***

## Related components

* [Button](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/button): Buttons are used for actions, such as "Add", "Continue", or "Pay now", or "Save".
* [ButtonGroup](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/buttongroup): A button group controls the layout for two or more stacked buttons such as "Continue" and "Return to cart", and adds the necessary spacing between them.

***

* [Props](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/link.md#props)
* [Best practices](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/link.md#best-practices)
* [Related components](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/link.md#related-components)