Link

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

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

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

§Внешний вид

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

§Тип normal

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

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

§Тип primary

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

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

§Тип secondary

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

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

§Visitable

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

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

§href

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

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

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

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

<Text>
    <Link href="#">what roles are active 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, и следующие свойства: