Link is used to navigate the buyer to another page.
---
### Example

```ts?title: "JS"
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);
});
```
```tsx?title: "React"
import {render, Link} from '@shopify/post-purchase-ui-extensions-react';
render('Checkout::PostPurchase::Render', () => );
function App() {
return Shopify;
}
```
## 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](/docs/api/checkout-extensions/post-purchase/components/button): Buttons are used for actions, such as “Add”, “Continue”, or “Pay now”, or “Save”.
- [ButtonGroup](/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.