Компактная метка для обозначения категорий, статусов и фильтров. Может быть статичным или интерактивным — с состоянием Active (Selected). Единая семантическая палитра из 6 цветов.
Варианты
3 визуальных стиля
Tag / Solid
Atoms · Label
Stable
Акцентная метка с насыщенным фоном. Статусы и категории. 36 вариантов.
SM · MD6 семантик36 variants · 38 tokens
SIZE_BASED · Dark ✓
Tag / Soft
Atoms · Label
Stable
Мягкая метка для второстепенных статусов. High Contrast при вложенности. 42 варианта.
SM · MD6 семантик42 variants · High Contrast
SIZE_BASED · Dark ✓
Tag / Outline
Atoms · Label
Stable
Контурная метка с прозрачным фоном. Теги-фильтры и технические метки.
SM · MD6 семантик42 variants
SIZE_BASED · Dark ✓
Два назначения тега
Статус · Элемент для нажатия и выбора
Тег работает в двух ролях, и по коду они различаются одним свойством. Статус —
подпись, которую нельзя нажать: внутри нет кнопки, нет остановки табуляции, скринридер
читает её как текст. Элемент для нажатия и выбора — настоящая кнопка внутри тега,
с состоянием «выбран» и клавиатурой. Это и есть умолчание системы: свойство
interactive у компонента включено, и тег без явного отключения приезжает
кнопкой.
Статус — нажать нельзя
В работеИсполненоОтклонено
Ставить там, где тег только сообщает состояние записи. В разметке — обычный
<span>: ни роли, ни фокуса, ни обещания действия.
Нажатие и выбор — умолчание системы
Внутри тега настоящая кнопка с aria-pressed: фильтр, переключаемая
метка, выбор из набора. Tab доводит до неё, Space и Enter дают нажатие.
Но переключает не тег. Своего состояния у компонента нет: active —
это вход, значение приходит снаружи, и обработчик нажатия тоже. Тег отвечает за вид,
доступное имя и aria-pressed; за то, что после нажатия что-то изменится,
отвечает тот, кто его поставил. Демонстрации ниже — статические: они показывают, как
выглядят три состояния, а не живое переключение. Нажимать их бесполезно, и это не
поломка.
Почему секция заведена 2026-08-25: витрина показывала одно, а система выдавала другое.
Из 104 тегов на этой странице интерактивными были 12, и все двенадцать демонстрировали
УДАЛЯЕМЫЙ тег, а не нажимаемый. Интерактивными они были не из-за крестика, а просто
потому, что interactive включён по умолчанию — крестик лишь добавляет
вторую кнопку рядом. Выбранного состояния не было ни одного.
Стили и семантики 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 с кнопкой сброса
High Contrast — тег поднят на сплошную поверхность, читается:
НейтральныйГотовоВ работе
Tag/Soft/Neutral использует alpha-заливку (nba-30) — на сером фоне она складывается с поверхностью и тег перестаёт читаться. HC свапит заливку на сплошную высококонтрастную поверхность (fill-neutral-outline-hc — белый в Light / #1c2023 в Dark), тег поднимается над серым фоном; семантический цвет текста сохраняется. Применяется к Soft и Outline (Solid уже контрастен на любом фоне).
Названия тегов
Краткость · Ясность
Правила
Краткость и единый стиль
Не начинается с глагола — тег не призывает к действию
Одно-два слова, 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
Интерактивный тест состояний — переключай и смотри