# Link

`Link` is a part of text that, when clicked, takes the user to another part of the page, another page within the service, or an external website page.

```tsx
import {Link} from '@gravity-ui/uikit';
```

Its main difference from [Button](./Button.md) is the navigation function. Most often, a `Link` leads to another page or opens a new browser tab.

## Appearance

There are three types of links available: `normal` (the usual brown), `primary` (black), and `secondary` (gray). You can manage it with the `view` property. You can also enable displaying that the link has already been clicked using the `visitable` property.

### Normal

This is the most familiar and well-established `link` pattern. It is used to visually highlight an element inside a text or table, and as part of navigation. You can use it to navigate to both internal pages and external sources, including documentation. Additionally, this type is used for error pages and zero states.

```tsx
<Link view="normal" href="#">
  Link
</Link>
```

### Primary

This type is used when it is natively clear that an element is clickable, but using a brown `Link` will overload the interface and prevent you from properly highlighting key points on a page.

```tsx
<Link view="primary" href="#">
  Link
</Link>
```

### Secondary

Just like primary `Link`, this type is used when it is natively clear to the user that an element is clickable, while navigating through it is not essential and affects a small number of scenarios. Its main goal is not to distract the user from the key points on the page. The `Secondary` type is most often used in breadcrumbs or when displaying secondary attributes.

```tsx
<Link view="secondary" href="#">
  Link
</Link>
```

### Visitable

This property is used to show that the `Link` has already been clicked.

```tsx
<Link href="https://gravity-ui.com/" visitable>
  Link
</Link>
```

## `href`

The `href` property is required.

```tsx
<Link href="#">Link with href</Link>
```

## Usage

You can use a `Link` both as an independent text element and as part of the text:

```tsx
<Text>
    <Link href="#">What roles are available in the service</Link>
</Text>
<Text>
    Currently, this role can only be assigned to a <Link href="#">folder</Link> or <Link href="#">cloud</Link>
</Text>
```

## Properties

`Link` accepts any valid `a` element props in addition to these:

| Name      | Description                                |                 Type                 |  Default   |
| :-------- | :----------------------------------------- | :----------------------------------: | :--------: |
| children  | `Link` content                             |          `React.ReactNode`           |            |
| href      | `href` HTML attribute                      |               `string`               |            |
| qa        | `data-qa` HTML attribute, used for testing |               `string`               |            |
| underline | Displays underline underneath the `Link`   |              `boolean`               |  `false`   |
| view      | `Link` appearance                          | `"normal"` `"primary"` `"secondary"` | `"normal"` |
| visitable | Displays the `:visitable` CSS state        |              `boolean`               |  `false`   |