---
description: Компонент для создания интерактивных текстовых ссылок или кнопок-ссылок.
tags: buttons, typography
---

<Overview group="typography">

# Link [tag:component]

Компонент для создания интерактивных текстовых ссылок или кнопок-ссылок.
Наследует стили шрифта от родителя и поддерживает все свойства [`Tappable`](/components/tappable).

</Overview>

{/* @example-description: Базовая текстовая ссылка `Link` с переходом по `href`. */}
<Playground>
  ```jsx
  <Link href="https://vk.cc/cMPb66">Я — ссылка</Link>
  ```
</Playground>

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

Для отображения дополнительных иконок перед и после текста можно использовать свойства `before` и `after` соответственно.
Рекомендуется использовать иконки размером `16px`.

{/* @example-description: Ссылка с иконками в `before` и `after` для дополнительного контекста. */}
<Playground>
  ```jsx
  <Link
    href="https://vkui.io"
    target="_blank"
    before={<Icon16ChainOutline />}
    after={<Icon16LinkOutline />}
  >
    Главная в новом окне
  </Link>
  ```
</Playground>

## Доступность (a11y) [#a11y]

Для обеспечения доступности автоматически выбирает HTML-тег (`<a>` при наличии `href`, иначе `<button>`).

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `activated` | `boolean` | `-` | Позволяет управлять `activated`-состоянием извне. |
| `activeClassName` | `string` | `-` | **Deprecated**: Since 7.3.0. Будет удалено в **VKUI v9**.  Используйте свойство `activeMode`. |
| `activeEffectDelay` | `number` | `-` | Длительность показа `active`-состояния. |
| `activeMode` | `StateModeLiteral` | `-` | Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. |
| `after` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | `-` | Иконка справа. |
| `before` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | `-` | Иконка слева. |
| `borderRadiusMode` | `"auto" \| "inherit"` | `-` | Задает border-radius элементу В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`. |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `-` |  |
| `focusVisibleMode` | `FocusVisibleMode` | `-` | Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible |
| `getRootRef` | `Ref<HTMLElement>` | `-` |  |
| `hasActive` | `boolean` | `-` | Указывает, должен ли компонент реагировать на `active`-состояние. |
| `hasHover` | `boolean` | `-` | Указывает, должен ли компонент реагировать на `hover`-состояние. |
| `hasHoverWithChildren` | `boolean` | `-` | Позволяет родительскому компоненту иметь `hovered`-cостояние при наведении на любой дочерний элемент. По умолчанию состояние hovered у родителя сбрасывается.  Присваивается родителькому компоненту. |
| `hasVisited` | `boolean` | `-` | Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет. |
| `hoverClassName` | `string` | `-` | **Deprecated**: Since 7.3.0. Будет удалено в **VKUI v9**.  Используйте свойство `hoverMode`. |
| `hovered` | `boolean` | `-` | Позволяет управлять `hovered`-состоянием извне. |
| `hoverMode` | `StateModeLiteral` | `-` | Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover. |
| `noUnderline` | `boolean` | `-` | Выключает появления нижнего подчеркивания при наведении. |
| `unlockParentHover` | `boolean` | `-` | Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент.  Присваивается дочернему компоненту. |