Choose a version:

Link

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

Anchor to linkpropsLinkProps

Anchor to accessibilityLabel 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.
Anchor to activateAction 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 'copy' 'copy'
Anchor to activateTarget 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.
Anchor to appearance appearance Extract<, 'monochrome'>: Specify the color of the link. monochrome will take the color of its parent.
Anchor to external 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.
Anchor to id id string: Unique identifier.

Typically used as a target for another component’s controls to associate an accessible label with an action.
Anchor to language 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 ("subtag" label)
Anchor to onPress onPress () => void: Callback when pressed. If to is set, it will execute the callback and then navigate to the location specified by to.
Anchor to overlay overlay RemoteFragment: An overlay component to render when the user interacts with the component.
Anchor to to to string: Destination to navigate to. You must provide either this property, onPress, or both.
Anchor to toggles toggles string: The component's identifier whose visibility will be toggled when this component is actioned.

Component	Supported Actions	Default ('auto')
`ClipboardItem`	'copy'	'copy'

LinkProps

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.
```
string
```
activateAction
Sets the action the `activateTarget` should take when this pressable is activated. Supported actions by component: | Component | Supported Actions | Default ('auto') | |---------------|-------------------|-------------------| | [`ClipboardItem`](/docs/api/checkout-ui-extensions/latest/clipboarditem) | 'copy' | 'copy' |
```
'auto' | 'copy'
```
activateTarget
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.
```
string
```
appearance
Specify the color of the link. `monochrome` will take the color of its parent.
```
Extract<Appearance, 'monochrome'>
```
external
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.
```
boolean
```
id
Unique identifier. Typically used as a target for another component’s controls to associate an accessible label with an action.
```
string
```
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)
```
string
```
onPress
Callback when pressed. If `to` is set, it will execute the callback and then navigate to the location specified by `to`.
```
() => void
```
overlay
An overlay component to render when the user interacts with the component.
```
RemoteFragment
```
to
Destination to navigate to. You must provide either this property, `onPress`, or both.
```
string
```
toggles
The component's identifier whose visibility will be toggled when this component is actioned.
```
string
```

export interface LinkProps
  extends OverlayActivatorProps,
    DisclosureActivatorProps,
    InteractionProps {
  /**
   * Destination to navigate to. You must provide either this property, `onPress`,
   * or both.
   */
  to?: string;
  /**
   * 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.
   */
  external?: boolean;
  /**
   * Unique identifier.
   *
   * Typically used as a target for another component’s controls
   * to associate an accessible label with an action.
   */
  id?: 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)
   */
  language?: 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.
   */
  accessibilityLabel?: string;
  /**
   * Specify the color of the link.
   * `monochrome` will take the color of its parent.
   */
  appearance?: Extract<Appearance, 'monochrome'>;
  /**
   * Callback when pressed. If `to` is set, it will execute the callback and
   * then navigate to the location specified by `to`.
   */
  onPress?(): void;
}

Appearance

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

Was this section helpful?

Basic Link

import {

reactExtension,

Link,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

return (

Sustainability fund

</Link>

);

}

examples

Basic Link

React

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

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

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

JS

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

export default extension('purchase.checkout.block.render', (root) => {
  const link = root.createComponent(
    Link,
    {to: 'https://www.shopify.ca/climate/sustainability-fund'},
    'Sustainability fund',
  );

  root.appendChild(link);
});

Preview

Anchor to appearanceAppearance

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

Was this section helpful?

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

Was this section helpful?

Anchor to relatedRelated

ComponentButton