Atoms · Navigation

Link Text

Текстовая ссылка с опциональной иконкой. Три размера, один смысловой ряд — Info. Встраивается в текстовый поток и работает как самостоятельный элемент навигации.

Состояния

Ряд Info — семь состояний
Перейти
Default
Перейти
Hover
Перейти
Pressed
Перейти
Visited
Перейти
Focus
Перейти
Disabled
Перейти
Read only
Visited — цвет тёмнее Default (info-900), подчёркивание убирается: пользователь уже посещал ссылку. Disabled — серый текст (--ds-disabled-text), без подчёркивания, pointer-events: none. Read only — вариант State=ReadOnly макета: ссылка становится обычным текстом (--ds-text-secondary, иконка --ds-icon-secondary), подчёркивания нет, в таб-порядок не попадает. Не то же, что Disabled: выключенная ссылка говорит «сейчас нельзя», read only — «перехода здесь нет вовсе», и цвета у них разные.

Размеры

SM · MD · LG — лестница Button
Только текст
Иконка слева
Иконка справа
SM
MD
LG
Размерная лестница Link Text совпадает с Button SM/MD/LG — токены --ds-lnk-* являются прямыми алиасами --ds-btn-*. LG отличается от MD только line-height (24px vs 20px) — более просторная строка для длинных текстовых блоков.

Варианты содержимого

Текст · Иконка слева · Иконка справа
Вариант
SM
MD
LG
Текст
Иконка →
Иконка →
← · →

Inline в тексте

Контекстное использование
Основной текст · MD · Info + Neutral
Для доступа к расширенной аналитике перейдите в раздел Отчёты и дашборды . Данные обновляются ежедневно. Если у вас нет прав, обратитесь к администратору системы или ознакомьтесь с инструкцией по доступу .
Сообщение об ошибке · SM · Info
Операция завершилась с ошибкой. Проверьте журнал ошибок или обратитесь в поддержку .
Успешное действие · SM · Info
Платёж успешно проведён. Посмотреть квитанцию

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

3 режима

Always

Подчёркивание всегда видно. Наиболее доступный вариант — пользователи с нарушениями цветовосприятия видят ссылку без опоры на цвет. Дефолтом НЕ является: в макете у состояния Default линии нет, и компонент по умолчанию идёт на Hover Only.

Hover Only (по умолчанию)

Подчёркивание появляется только при наведении и у посещённой ссылки — это состояния макета. Так работает компонент без пропа underline.

(наведите курсор)

None

Без подчёркивания. Только для ссылок с иконкой или когда контекст однозначно сигнализирует об интерактивности.

Правила использования

Когда · Чего избегать
Правила

Когда использовать Link Text

  • Навигация — переход на другую страницу или раздел без перегрузки интерфейса
  • Текст ссылки конкретный («Скачать инструкцию»), а не абстрактный («здесь»)
  • Названия отвечают на вопрос «Что я получу?» — глаголы и конкретика
  • iconBefore — для идентификации ссылки; iconAfter — для перехода на другую страницу
  • Внешние ссылки открываются в новой вкладке; область касания достаточного размера
  • Единый термин во всём продукте: не «Корзина» в одном месте и «Пакет заказов» в другом
Скачать инструкцию Открыть отчёт
Чего избегать

Когда НЕ использовать

  • Действие-команда (отправить, удалить, подтвердить) — используйте Button: у ссылки нет фона и границ, она читается как переход, а не как действие
  • Абстрактные тексты («здесь», «подробнее» без контекста) — пользователь не представит результат
  • Жаргон, внутренние термины и двусмысленные слова — значение должно быть понятно без спец-знаний
  • Обрезанный текст ссылки — пользователь не поймёт, что хотел донести интерфейс
Действие-команда → Button
Если элемент выполняет операцию, а не ведёт на другую страницу — это кнопка, не ссылка.

Доступность

WCAG 2.2 AA · APCA · ARIA · Keyboard
ARIA

Семантика

  • Используйте нативный <a href="..."> — браузер даёт focus, Enter, контекстное меню и visited-state автоматически
  • Избегайте <span role="link"> — теряются нативные поведения
  • Декоративные иконки — aria-hidden="true"
  • Если иконка — единственный контент ссылки, обязателен aria-label на <a>
Клавиатура

Навигация

  • Tab — фокус на ссылку
  • Shift + Tab — фокус на предыдущую ссылку
  • Enter — клик по ссылке (переход)
  • Space — прокрутка страницы, не активирует <a>
WCAG 2.2 AA · APCA

Контраст и различимость

  • Различимость не только цветом — подчёркивание (Underline, элемент 4 анатомии)
  • Info (#4564e5 на белом) — APCA Lc 55+
  • Neutral (#222629) — APCA Lc 90+
  • Positive (#2c9205) — APCA Lc 52+
  • При режиме Hover Only убедитесь в достаточном контрасте или используйте Always
Focus Ring

Фокус

  • Кольцо рисует box-shadow: var(--ds-focus-ring) — один токен на всю систему, тот же, что у Button и Chip. Не outline: у него нет заливаемого зазора
  • Кольцо двойное: 1px зазор цветом --ds-surface-0, поверх 2px акцента --ds-focus-ring-color. Зазор и делает кольцо видимым на цветной подложке и на soft-заливке
  • Цвет не хардкодить: --ds-focus-ring-color = #6C8DFA в светлых темах и #7191F7 в тёмных. Зашитый hex ломается в 2 темах из 4
  • Используется :focus-visible, не :focus — не мешает при клике мышью

Работа с клавиатурой

Tab · Enter
Клавиша
Действие
Tab
Получение ссылкой состояния фокуса. Shift + Tab — фокус на предыдущую ссылку.
Enter
Клик по ссылке — переход по адресу.
Ссылка проста в управлении с клавиатуры: фокус по Tab, активация по Enter. Space прокручивает страницу и не активирует ссылку. Индикатор фокуса виден только при навигации с клавиатуры (:focus-visible).

State Explorer

Интерактивный тест состояний — переключай и смотри