Choose a version:

Link

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

Anchor to linkpropsLinkProps

Anchor to accessibilityLabel accessibilityLabel 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.
Anchor to href href string: The URL to link to. If set, it will navigate to the location specified by href after executing the onClick callback.
Anchor to id id string: A unique identifier for the link.
Anchor to lang lang string: Alias for language
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 onClick onClick () => 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.
Anchor to onPress onPress () => 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.
Anchor to target target '_blank' | '_self' Default: '_self': Specifies where to display the linked URL
Anchor to to to string: Alias for href If set, it will navigate to the location specified by to after executing the onClick callback.
Anchor to tone tone '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.

LinkProps

accessibilityLabel
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
```
href
The URL to link to. If set, it will navigate to the location specified by `href` after executing the `onClick` callback.
```
string
```
id
A unique identifier for the link.
```
string
```
lang
Alias for `language`
```
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
```
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`.
```
() => void
```
onPress
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`.
```
() => void
```
target
Specifies where to display the linked URL
```
'_blank' | '_self'
```
to
Alias for `href` If set, it will navigate to the location specified by `to` after executing the `onClick` callback.
```
string
```
tone
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.
```
'default' | 'inherit' | 'critical'
```

export interface LinkProps extends AccessibilityLabelProps {
  /**
   * A unique identifier for the link.
   */
  id?: string;

  /**
   * The URL to link to.
   * If set, it will navigate to the location specified by `href` after executing the `onClick` callback.
   */
  href?: string;

  /**
   * Alias for `href`
   * If set, it will navigate to the location specified by `to` after executing the `onClick` callback.
   */
  to?: string;

  /**
   * 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.
   */
  tone?: 'default' | 'inherit' | 'critical';

  /**
   * Callback when a link is pressed. If `href` is set,
   * it will execute the callback and then navigate to the location specified by `href`.
   */
  onClick?(): 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`.
   */
  onPress?(): void;

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

  /**
   * Alias for `language`
   */
  lang?: string;
  /**
   * Specifies where to display the linked URL
   * @default '_self'
   */
  target?: '_blank' | '_self';
}

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 to app path

</Link>

);

}

examples

Link to an app page

React

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

JS

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

export default extension(
  'Playground',
  (root) => {
    const link = root.createComponent(
      Link,
      {href: 'app://baz'},
      'Link to app path',
    );

    root.appendChild(link);
  },
);

Preview

Anchor to examplesExamples

Anchor to example-external-linkExternal Link

Link to an external URL

Anchor to example-relative-linkRelative Link

Link to a relative URL

Anchor to example-shopify-section-linkShopify Section Link

Link to a Shopify admin page

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 (

Sustainability fund

</Link>

);

}

examples

External Link

description

Link to an external URL

React

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

JS

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

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

    root.appendChild(link);
  },
);

Relative Link

description

Link to a relative URL

React

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


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

function App() {
  return (
    <Link href="/baz">
      Link relative to current path
    </Link>
  );
}

JS

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

export default extension(
  'Playground',
  (root) => {
    const link = root.createComponent(
      Link,
      {href: '/baz'},
      'Link relative to current path',
    );

    root.appendChild(link);
  },
);

Shopify Section Link

description

Link to a Shopify admin page

React

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


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

function App() {
  return (
    <Link href="shopify://admin/orders">
      Shop's orders
    </Link>
  );
}

JS

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

export default extension(
  'Playground',
  (root) => {
    const link = root.createComponent(
      Link,
      {href: 'shopify://admin/orders'},
      "Shop's orders",
    );

    root.appendChild(link);
  },
);

Preview

Anchor to relatedRelated

Button