Link

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

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

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

LinkProps

LinkProps

id

A unique identifier for the link.

href

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

to

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

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.

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

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`.

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)

lang

Alias for `language`

target

Specifies where to display the linked URL

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.

Related

• Button

Examples

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

Link to an external URL

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

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

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

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

Link to a relative URL

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

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

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

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

Link to a Shopify admin page

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

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

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

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