Теги — это компактные элементы интерфейса, предназначенные для маркировки, категоризации или фильтрации контента. Они помогают пользователям быстро определить, к какой категории относится элемент, какой у него статус или какие ключевые характеристики он имеет, а также улучшают навигацию.
Базовая анатомия
В большинстве случаев основой тега является контейнер с закруглёнными углами, в котором размещён короткий текст. Если теги можно объединить в несколько групп, то стоит окрасить их в разные цвета, чтобы усилить обозначение категорий или статусов. Отступы внутри тега должны быть пропорциональными для обеспечения читаемости текста.
Анатомия с дополнительными элементами
В целом, теги не предполагают наличие чего-то, кроме текста, однако, если это необходимо, они могут быть дополнены простыми иконками, усиливающими визуальную идентификацию, или кнопками удаления. Кроме того, в интерактивных тегах может присутствовать счётчик или индикатор дополнительной информации. Группа тегов должна иметь достаточные отступы.
Теги могут быть как статичными элементами, отображающими информацию, так и интерактивными элементами управления.
Default
В обычном состоянии тег должен чётко выделяться на фоне основного контента, но не привлекать слишком много внимания. Стоит внимательно подойти к выбору цветов, чтобы они имели хорошую читаемость.
Hover
При наведении на интерактивный тег появляется лёгкий эффект, указывающий на возможность взаимодействия. Если он содержит кнопку удаления, то она должна стать более заметной.
Active
При взаимодействии (например, при нажатии) тег способен слегка менять свой вид, например, стать темнее. Анимация делается минимальной, но заметной.
Disabled
Неактивный тег сохраняет свою форму, но использует приглушённые цвета, показывая, что взаимодействие с ним невозможно.
