НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Ссылка

Ссылка ведёт читателя в другое место. Она повторяет размер и начертание окружающего текста и добавляет цвет ссылки и подчёркивание.

Стабильный Figma
ОбзорИспользованиеAPIДоступность

Read our privacy policy before you sign up.

<p>Read our <tk-link href="/privacy">privacy policy</tk-link> before you sign up.</p>

Анатомия

Часть Что это
tk-link сам элемент; одна остановка Tab, если задан href
слот по умолчанию текст ссылки, обязателен; он же доступное имя
part link нативный <a> внутри

Своего размера у ссылки нет. Шрифт она берёт у окружения: в абзаце это Body Medium, в заголовке крупнее. Чтобы изменить размер, оформите текст вокруг неё.

Варианты

Подчёркивание

See the setup guide.

Pricing
<p>See the <tk-link href="/guide">setup guide</tk-link>.</p>
<tk-link href="/pricing" underline="hover">Pricing</tk-link>
  • always (по умолчанию): подчёркнута всегда, поэтому не зависит от цвета. Для любой ссылки в тексте.
  • hover: подчёркивание появляется при наведении и фокусе с клавиатуры. Только там, где и так понятно, что это ссылка, например в навигационной строке. Никогда в тексте.

Цвет

Questions? Visit the help center.

<p>Questions? <tk-link href="/help" color="inherit">Visit the help center</tk-link>.</p>
  • accent (по умолчанию): цвет ссылки, отличный от основного текста.
  • inherit: цвет окружающего текста; подчёркивание оставьте.
  • inverse: для ссылки на инверсной (тёмной) поверхности. Включите для этой поверхности тёмную тему, чтобы рамка фокуса подошла.

Не сочетайте color="inherit" с underline="hover": ссылка ничем не отличается от текста вокруг. Компонент предупредит в консоли.

Тихая

<nav aria-label="Account">
  <tk-link href="/profile" treatment="quiet">Profile</tk-link>
  <tk-link href="/billing" treatment="quiet">Billing</tk-link>
</nav>

treatment="quiet" — приглушённая ссылка без подчёркивания в покое. При наведении и фокусе она темнеет и подчёркивается. Она заменяет color и underline: те перестают действовать. Только для навигационных строк и цепочек разделов, никогда в тексте.

Состояния

Reports Current page
<tk-link href="/reports">Reports</tk-link>
<tk-link aria-current="page">Current page</tk-link>

Наведение, нажатие и фокус работают без атрибутов. При наведении появляется подчёркивание, а у accent цвет темнеет. При фокусе с клавиатуры появляется рамка.

  • Без href: на ссылку нельзя перейти с клавиатуры и по ней нельзя пройти. Атрибута disabled нет; просто не задавайте href.
  • aria-current="page": отмечает ссылку на страницу, где читатель сейчас. Компонент передаёт атрибут внутреннему <a>.
  • Посещённые ссылки выглядят так же, как непосещённые.
Annual report (opens in a new tab)
<tk-link href="https://example.com/report" target="_blank" external>Annual report (opens in a new tab)</tk-link>
  • target="_blank" открывает новую вкладку и сам добавляет rel="noopener noreferrer" к вашему rel, если он есть.
  • external добавляет в конце иконку внешней ссылки. Она масштабируется и окрашивается вместе с текстом и скрыта от скринридеров.
  • Пишите «откроется в новой вкладке» в тексте, если это важно: иконка ничего не сообщает.