Skip to main content

Link

This is an interactive component that directs users to a specified URL. It even supports custom protocols.

string

A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. When set, any children or label supplied will not be announced to screen readers.

string

The URL to link to. If set, it will navigate to the location specified by href after executing the onClick callback.

string

A unique identifier for the link.

string

Alias for 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)

() => void

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

() => void

Alias for onClick Callback when a link is pressed. If href is set, it will execute the callback and then navigate to the location specified by href.

'_blank' | '_self'
Default: '_self'

Specifies where to display the linked URL

string

Alias for href If set, it will navigate to the location specified by to after executing the onClick callback.

'default' | 'inherit' | 'critical'

Sets the link color.

  • inherit will take the color value from its parent, giving the link a monochrome appearance. In some cases, its important to pair this property with another stylistic treatment, like an underline, to differentiate the link from a normal text.
Was this section helpful?

Link to an app page

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


render('Playground', () => <App />);

function App() {
return (
<Link href="app:bar">
Link to app path
</Link>
);
}

Preview

Was this section helpful?

External Link

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


render('Playground', () => <App />);

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

Preview