Link
Link makes text interactive so customers can perform an action, such as navigating to another location.
Anchor to linkpropsLinkProps
- string
Destination to navigate to. You must provide either this property,
, or both.
- Anchor to externalexternalboolean
Open the link in a new window or tab
- string
Unique identifier.
Typically used as a target for another component’s controls to associate an accessible label with an action.
- Anchor to languagelanguagestring
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 accessibilityLabelaccessibilityLabelstring
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 appearanceappearanceExtract<, 'monochrome'>
Specify the color of the link.
monochrome
will take the color of its parent.- Anchor to onPressonPress() => void
Callback when pressed. If
to
is set, it will execute the callback and then navigate to the location specified byto
.- Anchor to overlayoverlayRemoteFragment
An overlay component to render when the user interacts with the component.
- Anchor to togglestogglesstring
The component's identifier whose visibility will be toggled when this component is actioned.
LinkProps
- to
Destination to navigate to. You must provide either this property, `onPress`, or both.
string
- external
Open the link in a new window or 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
- 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
- appearance
Specify the color of the link. `monochrome` will take the color of its parent.
Extract<Appearance, 'monochrome'>
- 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
- toggles
The component's identifier whose visibility will be toggled when this component is actioned.
string
export interface LinkProps
extends OverlayActivatorProps,
DisclosureActivatorProps {
/**
* Destination to navigate to. You must provide either this property, `onPress`,
* or both.
*/
to?: string;
/**
* Open the link in a new window or 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
'accent' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'
Basic Link
examples
Basic Link
React
import {render, Link} from '@shopify/checkout-ui-extensions-react'; render('Checkout::Dynamic::Render', () => <Extension />); function Extension() { return ( <Link to="https://www.shopify.ca/climate/sustainability-fund"> Sustainability fund </Link> ); }
JS
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); });
Preview

Anchor to appearanceAppearance
Value | Description |
---|---|
"monochrome" | Takes the color of its parent. |
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.