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

```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
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`.
### accessibilityLabel
A label used for users using assistive technologies. When set, any
`children` supplied to this component will not be announced to screen reader users.
### 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
## Related
- [Button](/docs/api/admin-extensions/components/actions/button)
## Examples
This is an interactive component that directs users to a specified URL. It even supports custom protocols.
### 
Link to an external URL
### External Link

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

```

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

```


### 
Link to a relative URL
### Relative Link

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

```

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

```


### 
Link to a Shopify admin page
### Shopify Section Link

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

```

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

```