---
title: Link
description: >-
  This is an interactive component that directs users to a specified URL. It
  even supports custom protocols.
api_version: 2024-10
api_name: admin-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/admin-extensions/2024-10/components/actions/link
  md: >-
    https://shopify.dev/docs/api/admin-extensions/2024-10/components/actions/link.md
---

# Link

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

## LinkProps

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

* href

  string

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

* id

  string

  A unique identifier for the link.

* lang

  string

  Alias for `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](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label)

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

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

* target

  '\_blank' | '\_self'

  Default: '\_self'

  Specifies where to display the linked URL

* to

  string

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

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

Examples

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/link-default.png)

### Examples

* #### Link to an app page

  ##### React

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

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

* #### External Link

  ##### Description

  Link to an external URL

  ##### React

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

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

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

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

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

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

## Related

[- Button](https://shopify.dev/docs/api/admin-extensions/components/actions/button)