Ссылка

Ссылка ведёт на другую страницу, раздел страницы или файл. Для действия на текущей странице — сохранить, отправить, открыть окно — берите кнопку.

Пример

<p class="m-0">Подробности — в <a class="sf-link" href="#link-destination"><span class="sf-link-content">описании тарифов</span></a>.</p>

Разметка

Минимальную разметку показывает пример выше: нативный <a> с классом sf-link, настоящим адресом в href и подписью в sf-link-content.

• Блок sf-link — строчный flex-контейнер: ссылку можно ставить внутрь абзаца, длинная подпись переносится внутри неё.
• Подпись лежит в sf-link-content. CSS читает и написание sf-link__content; в разметке используйте sf-link-content.
• Иконка — <i class="sf-icon sf-link-icon" aria-hidden="true"> до или после подписи; её размер равен высоте строки ссылки. Написание sf-link__icon CSS тоже читает.
• Скрипта у ссылки нет: переход выполняет браузер.

Варианты

Иконка

Иконка уточняет направление или тип перехода: стрелка назад — до подписи, стрелка вперёд или значок внешнего ресурса — после. Подпись остаётся обязательной: иконка её не заменяет.

<div class="flex flex-wrap gap-4">
  <div class="flex flex-col gap-1">
    <a class="sf-link" href="#link-back">
      <i class="sf-icon sf-link-icon" aria-hidden="true">arrow_back</i>
      <span class="sf-link-content">К списку заказов</span>
    </a>
    <code class="text-1/2 color-on-surface-variant">sf-link-icon до подписи</code>
  </div>
  <div class="flex flex-col gap-1">
    <a class="sf-link" href="#link-forward">
      <span class="sf-link-content">Открыть руководство</span>
      <i class="sf-icon sf-link-icon" aria-hidden="true">arrow_forward</i>
    </a>
    <code class="text-1/2 color-on-surface-variant">sf-link-icon после подписи</code>
  </div>
</div>

Состояния

Наведение и нажатие убирают подчёркивание и меняют цвет на роли --sf-link-hover и --sf-link-active; посещённая ссылка берёт цвет --sf-link-visited. Эти состояния компонент показывает сам.

Недоступна

Если переход временно невозможен, уберите href и добавьте aria-disabled="true" (или класс disabled): ссылка теряет подчёркивание и берёт цвет недоступного текста. Без href элемент <a> не получает фокус и не переходит. Рядом объясните, почему переход недоступен.

<div class="flex flex-wrap gap-4">
  <div class="flex flex-col gap-1">
    <a class="sf-link" href="#link-active"><span class="sf-link-content">Открыть отчёт</span></a>
    <code class="text-1/2 color-on-surface-variant">с href</code>
  </div>
  <div class="flex flex-col gap-1">
    <a class="sf-link" aria-disabled="true"><span class="sf-link-content">Отчёт готовится</span></a>
    <code class="text-1/2 color-on-surface-variant">без href, aria-disabled="true"</code>
  </div>
</div>

Фокус

При переходе клавишей Tab ссылка получает кольцо фокуса по :focus-visible. В примере фокус показан классом focus-visible, который CSS компонента читает наравне с псевдоклассом.

<a class="sf-link focus-visible" href="#link-focus"><span class="sf-link-content">Ссылка в фокусе</span></a>

Доступность

• Подпись называет цель перехода: «Описание тарифов», а не «Здесь» или «Подробнее». Экранный диктор часто зачитывает ссылки списком, без окружающего текста.
• Декоративную иконку скрывайте через aria-hidden="true".
• Ссылка, которая открывает новую вкладку или скачивает файл, сообщает об этом в подписи или в тексте рядом.
• Ссылка срабатывает клавишей Enter; кольцо фокуса рисует компонент.
• Подчёркивание отличает ссылку от текста не только цветом; не убирайте его у ссылок внутри абзаца.

Классы

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид Smart-компонента — его шаблон (см. Переменные компонента). Значение по умолчанию — из базового правила блока (.sf-link); переменную без него задают только модификаторы.

См. также

• Кнопки