Atoms · Navigation

Link Text

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

Состояния

Intent · Info — шесть состояний
Перейти
Default
Перейти
Hover
Перейти
Pressed
Перейти
Visited
Перейти
Focus
Перейти
Disabled
Visited — цвет тёмнее Default (info-900), подчёркивание убирается: пользователь уже посещал ссылку. Disabled — серый текст (--ds-disabled-text), без подчёркивания, pointer-events: none.

Размеры

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
Текст
Подробнее
Подробнее
Подробнее
Иконка →
Открыть
Открыть
Открыть
Иконка →
Скачать
Скачать
Скачать
← · →
Назад
Назад
Назад

Интенты

6 интентов · Default + Hover
Info
Перейти Hover
info-500 / 700
Brand
Перейти Hover
brand-500 / 700
Neutral
Перейти Hover
neutral-fill / hover
Positive
Перейти Hover
pos-default / hover
Negative
Перейти Hover
neg-default / hover
Warning
Перейти Hover
warn-500 / 700
Info — основной для навигационных и контентных ссылок. Brand — акцентный, для промо-CTA. Neutral — на тёмном или нейтральном фоне. Positive / Negative / Warning — только для контекстуально-семантических ссылок (успех, ошибка, предупреждение).

Inline в тексте

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

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

3 режима

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

Подчёркивание всегда видно. Наиболее доступный вариант — пользователи с нарушениями цветовосприятия видят ссылку без опоры на цвет.

Посмотреть отчёт

Hover Only

Подчёркивание появляется только при наведении. Уместно в плотных UI-блоках, где цвет однозначно маркирует ссылку.

Посмотреть отчёт (наведите курсор)

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

Фокус

  • Outline 2px, цвет --ds-info-800 (#5475F8)
  • Offset 1px — виден на любом фоне
  • box-shadow: --ds-shadow-focus — тот же паттерн, что у Button и Chip
  • Используется :focus-visible, не :focus — не мешает при клике мышью

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

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

State Explorer

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