Link

Link is used to navigate the buyer to another page.

Anchor to ExampleExample

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);

});

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>;

}

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

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>;
}

Anchor to PropsProps

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`.

Anchor to Best practicesBest 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.

Anchor to Related componentsRelated components

Button: Buttons are used for actions, such as "Add", "Continue", or "Pay now", or "Save".
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.

Was this page helpful?