# Link



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

`Link` (ссылка) — это часть текста, при нажатии на которую пользователь переходит на другую часть текущей страницы, на другую страницу в рамках сервиса или на страницу внешнего сайта.

Главное отличие `Link` от [Button](../Button) заключается в функции навигации. Чаще всего `Link` ведет на другую страницу или открывает новую вкладку браузера.

## Внешний вид

Существует три типа ссылок: `normal` (стандартный коричневый), `primary` (черный) и `secondary` (серый). Внешний вид ссылки можно изменять с помощью свойства `view`. Также можно включить отображение того, что на ссылку уже нажимали, используя свойство `visitable`.

### Тип `normal`

Это наиболее привычный и общепринятый шаблон компонента `link`. Применяется для визуального выделения элемента внутри текста или таблицы, а также для навигации. Можно использовать его для перехода как на внутренние страницы, так и на внешние источники, включая документацию. Кроме того, этот тип используется для страниц с ошибками и нулевых состояний.





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



### Тип `primary`

Этот тип используется, когда очевидно, что элемент является кликабельным, но использование коричневого компонента `Link` будет перегружать интерфейс и мешать выделению ключевых моментов на странице.





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



### Тип `secondary`

Как и `primary`, этот тип `Link` используется, когда пользователю очевидно, что элемент кликабелен, но навигация по нему не является обязательной и затрагивает лишь небольшое количество сценариев. Его основная цель — не отвлекать пользователя от ключевых моментов на странице. Тип `secondary` чаще всего используется в хлебных крошках или при отображении вторичных атрибутов.





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



### `Visitable`

Это свойство используется, чтобы показать, что на `Link` уже нажимали.





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



## `href`

Свойство `href` является обязательным.





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



## Использование

`Link` можно использовать и как независимый текстовый элемент, и как часть текста.





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



## Свойства

`Link` принимает все допустимые свойства элемента `a`, и следующие свойства:

| Имя       | Описание                                              |                 Тип                  | Значение по умолчанию |
| :-------- | :---------------------------------------------------- | :----------------------------------: | :-------------------: |
| children  | Содержимое ссылки                                     |          `React.ReactNode`           |                       |
| href      | HTML-атрибут `href`                                   |               `string`               |                       |
| qa        | HTML-атрибут `data-qa`, используется для тестирования |               `string`               |                       |
| underline | Отображает подчеркивание у ссылки                     |              `boolean`               |        `false`        |
| view      | Внешний вид ссылки                                    | `"normal"` `"primary"` `"secondary"` |      `"normal"`       |
| visitable | Отображает CSS-состояние `:visitable`                 |              `boolean`               |        `false`        |