# Link

Link makes text interactive so customers can perform an action, such as navigating to another location.

```tsx
import {
  reactExtension,
  Link,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

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

```

```js
import {extension, Link} from '@shopify/ui-extensions/checkout';

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

  root.appendChild(link);
});

```

## LinkProps

### LinkProps

### to

value: `string`

Destination to navigate to. You must provide either this property, `onPress`,
or both.

### external

value: `boolean`

Open the link in a new window or tab

### id

value: `string`

Unique identifier.

Typically used as a target for another component’s controls
to associate an accessible label with an action.

### language

value: `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)

### accessibilityLabel

value: `string`

A label used for buyers using assistive technologies. When set, any
`children` supplied to this component will not be announced to screen reader users.

### appearance

value: `Extract<Appearance, 'monochrome'>`

  - Appearance: 'accent' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'
Specify the color of the link.
`monochrome` will take the color of its parent.

### onPress

value: `() => void`

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

### overlay

value: `RemoteFragment`

An overlay component to render when the user interacts with the component.

### toggles

value: `string`

The component's identifier whose visibility will be toggled when this component is actioned.

## Related

- [Button](button)