---
title: Link | UI
description: Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink.
pageTitle: Link
pageDescription: Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink.
showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="components/Forms/Link" />

import { LinkTemp as Link, Text as LinkText } from './Link';
import { transformedCode } from '../../../utils';
import {
  AppProvider,
  CodePreview,
  Table,
  Text,
  InlineCode,
} from '@gluestack/design-system';

import Wrapper from '../../Wrapper';

# Installation

This command copies the `Link` component to your project.

```jsx
npx install @gluestack-ui add link
```

## Import

```jsx
// import the component from your component folder
import { Link } from 'components';
```

<br />

# Basic

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
<Link href="https://gluestack.io/">
  <Text>Link</Text>
</Link>
`,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        Link,
        Text: LinkText,
      },
      argsType: {},
    }}
  />
</AppProvider>
<br />

## Anatomy

The link component consists of the following parts:

```jsx
export default () => (
  <Link>
    <Text>Link</Text>
  </Link>
);
```

## API Reference

### Link

Contains all link related layout style props and actions.
It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable#props) component.

<AppProvider>
  <Table>
    <Table.THead>
      <Table.TR>
        <Table.TH>
          <Table.TText>Prop</Table.TText>
        </Table.TH>
        <Table.TH>
          <Table.TText>Type</Table.TText>
        </Table.TH>
        <Table.TH>
          <Table.TText>Default</Table.TText>
        </Table.TH>
        <Table.TH>
          <Table.TText>Description</Table.TText>
        </Table.TH>
      </Table.TR>
    </Table.THead>
    <Table.TBody>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>href</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>string</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`URL that should be opened on Link press.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>onPress</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{'(event?: GestureResponderEvent) => any'}</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`Callback that will be invoked on Link press.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>isExternal</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>boolean</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>false</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`If true, link will be opened in new tab on web. It uses _target property to achieve this.`}</Table.TText>
        </Table.TD>
      </Table.TR>
    </Table.TBody>
  </Table>
</AppProvider>

## Accessibility

Adheres to the [WAI-ARIA design pattern]('https://www.w3.org/WAI/ARIA/apg/#link').

## Dependencies

- `@gluestack-ui/utils`
- `@react-native-aria/focus`

<br />
<br />

## Examples

### External link

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
<Link href="https://gluestack.io/" isExternal>
  <Text>Link</Text>
</Link>
`,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: { Link, Wrapper, Text: LinkText },
      argsType: {},
    }}
  />
</AppProvider>

<br />

# Advanced

## Customizing the Link

We have a function called `createLink` which can be used to create a custom link component. This function takes in a configuration object which contains the styled components that you want to use for the link. You can refer [dank.style](https://dank.style/) for more information on how to use styled components.

### Usage

```jsx
// import the styles
import { Root } from '../components/core/link/styled-components';

// import the createLink function
import { createLink } from '@gluestack-ui/link';

// Understanding the API
const Link = createLink({
  Root,
});

// Using the link component
export default () => (
  <Link href="">
    <Text />
  </Link>
);
```

Default styling of all these components can be found in the `components/core/link` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/components/Link/index.tsx) of the styled `Link` components.

### How to use Next.js Link

By default, Link component uses anchor tag on web and pressable on native. If you want to use Next.js Link component on web, you have to create a new styled component for link and map it to Link component. You can also change the already present styled-component for link on the path `./components/core/link/styled-components` in your project. For web specific styling, you can create a file with `.web` extension. For example, if you want to create a custom link component, you can create a file named `Link.tsx` and `Link.web.tsx` in the same directory. The `.web` file will be used only on web and the `Link.tsx` file will be used on native.

```jsx
import Link from 'next/link'
import { styled } from '@dank-style/react';

// Using the Next Link component
const StyledLink = styled(Link, styling, componentConfig, extenedBaseConfig);

// if some styling are direct props, you can pass them as props in the styling
props: {
  w: 100,
  h: 100,
  borderRadius: '$full',
}

// you can also https://dank.style/docs/getting-started/styled to style the component


export default () => <StyledLink />;
```