05 · Components · Stable

Tag

Компактная метка для обозначения категорий, статусов и фильтров. Может быть статичным или интерактивным — с состоянием Active (Selected). Единая семантическая палитра из 6 цветов.

Варианты

3 визуальных стиля
Tag / Solid
Atoms · Label
Stable
Акцентная метка с насыщенным фоном. Статусы и категории. 36 вариантов.
SM · MD 6 семантик 36 variants · 38 tokens
SIZE_BASED · Dark ✓
Tag / Soft
Atoms · Label
Stable
Мягкая метка для второстепенных статусов. High Contrast при вложенности. 42 варианта.
SM · MD 6 семантик 42 variants · High Contrast
SIZE_BASED · Dark ✓
Tag / Outline
Atoms · Label
Stable
Контурная метка с прозрачным фоном. Теги-фильтры и технические метки.
SM · MD 6 семантик 42 variants
SIZE_BASED · Dark ✓

Стили и семантики Tag

Solid · Soft · Outline
Стиль
Neutral
Brand
Info
Positive
Negative
Warning
Solid
Нейтральный
Брендовый
Информация
Готово
Ошибка
Внимание
Soft
Нейтральный
Брендовый
Информация
Готово
Ошибка
Внимание
Outline
Нейтральный
Брендовый
Информация
Готово
Ошибка
Внимание
Disabled
Нейтральный Информация Outline

Состояния Tag

Default · Hover · Active · Disabled
Default — без взаимодействия
В работе Готово Отклонено Ожидает Черновик
Hover — реакция на наведение, подсказывает кликабельность
В работе Готово Отклонено Ожидает Черновик
Active (Selected) — тег выбран, например при фильтрации
В работе Готово Отклонено Черновик
Disabled
В работе Готово

Tag с иконками

Leading · Trailing · Leading + Trailing
Leading icon — статус, тип, категория
В работе Готово Ожидает Отклонено Черновик
Trailing icon — removable tag, снятие фильтра
В работе Готово Информация Нейтральный
Leading + Trailing — статус и снятие фильтра одновременно
В работе Готово Ожидает Отклонено
Размеры — SM · MD с иконкой
SM В работе MD В работе SM Готово MD Готово

Группа тегов

Фильтры · Применённые · Атрибуты
Фильтр-группа — один тег активен, остальные доступны для выбора
Все В работе Готово Ожидает Отклонено Черновик
Применённые фильтры — removable chips с кнопкой сброса
Фильтры:
Готово Срочно В работе Ожидает
Сбросить всё
Атрибуты записи — несколько тегов, разные фасеты одной сущности
Договор №1047-А
Одобрено Срочно Внутренний Q2 2026
Договор №1048-Б
На проверке Высокий Внешний

Tag в таблице

Типичный B2B-контекст
Заявка
Сумма
Статус
Приоритет
Договор №1047-А
₽ 1 200 000
Одобрено
Стандартный
Договор №1048-Б
₽ 850 000
На проверке
Срочно
Договор №1049-В
₽ 450 000
Отклонено
Низкий
Договор №1050-Г
₽ 3 100 000
В работе
Высокий

High Contrast

Soft · только на сером фоне
Белая поверхность — Default
Мягкий фон тегов читается — HC не нужен
Нейтральный Брендовый Информация Готово Ошибка Внимание
Серая поверхность — нужен HC
Neutral тег сливается с фоном страницы
Default — нейтральный тег сливается с серым:
Нейтральный Готово В работе
High Contrast — белый фон, тег читается:
Нейтральный Готово В работе

Tag/Soft/Neutral использует alpha-заливку (nba-15) — на сером фоне она складывается с поверхностью и тег перестаёт читаться. HC меняет заливку на белый (nb-0) и добавляет border в цвет семантики. Применяется только к Soft-варианту: Solid и Outline уже контрастны на любом фоне.

Названия тегов

Краткость · Ясность
Правила

Краткость и единый стиль

  • Не начинается с глагола — тег не призывает к действию
  • Одно-два слова, 3–15 символов оптимально
  • Для статусов — причастия: «Отправлено», «Обработано», «Ожидает»
  • С заглавной буквы; для техн. меток — строчные: «beta»
  • Длинный текст → многоточие + tooltip
Готово В работе Ожидает Отклонено Черновик beta
Типичные ошибки

Чего избегать

  • Теги как кнопки для действий — для этого есть Button
  • Произвольные семантические цвета — у них устоявшееся значение
  • Сокращения: «Просмотр.» → плохо; «Просмотрено» → хорошо
  • Англицизмы: «ОК» → «Готово»
  • Много тегов на одном экране — визуальный хаос
  • Icon Only — не существует. Тег всегда содержит текст; иконка допустима только как Leading или Trailing
Сохранить OK Просмотр.

Адаптивность

Mobile · Touch targets
Мобильные устройства

Размер и поведение

  • Используйте MD (24px) — обеспечивает достаточную область касания
  • SM (20px) допустим только для read-only тегов без интерактивности
  • Длинный текст обрезается сильнее — учитывайте при написании
  • При нехватке места метки переносятся на новую строку — вертикальная прокрутка предпочтительнее горизонтальной
  • Иконка закрытия («крестик») должна быть достаточно большой для касания пальцем
Готово В работе Ожидает
MD — минимальный размер для touch на мобильных
Переполнение группы

Адаптивное поведение

  • Теги переносятся на новую строку при нехватке ширины контейнера
  • 3–5 видимых тегов, остальные сворачиваются в тег «+N»
  • Горизонтальный скролл — только в крайних случаях
  • Контейнер группы растягивается вертикально при переносе строк
Финансы Проекты Задачи +4

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

WCAG 2.2 AA

Read-only теги

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

Интерактивные теги

Теги с иконкой удаления или теги-фильтры — в порядке табуляции. Фокус отображается вокруг всего тега. При удалении тега фокус переходит на следующий элемент.

Клавиша
Действие
Tab
Фокус на первый интерактивный тег группы; повторно — следующий тег
← / →
Переход к предыдущему / следующему тегу в группе
Enter / Space
Включить/выключить тег (фильтр) или удалить тег (с иконкой закрытия)
Shift + Tab
Предыдущий элемент в порядке табуляции

State Explorer

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