Link

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

import {render, Link} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => );

function Extension() {
  return (
    
      Sustainability fund
    
  );
}

import {extend, Link} from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::Render', (root) => {
  const link = root.createComponent(
    Link,
    {to: 'https://www.shopify.ca/climate/sustainability-fund'},
    'Sustainability fund',
  );

  root.appendChild(link);
});

LinkProps

LinkProps

to

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

external

Open the link in a new window or tab

id

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

language

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)

accessibilityLabel

A label used for buyers using assistive technologies. When set, any `children` supplied to this component will not be announced to screen reader users.

appearance

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

onPress

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

overlay

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

toggles

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

Appearance

'accent' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'

Related

• Button