Tag

Tag — элемент для фильтрации, сортировки и отображения элементов.
*Функциональное отличие от чипов: теги добавляются куда-то при взаимодействии с третьим элементом, а чипы добавляются и прокликиваются вручную по ним самим (работают как фильтр).

Из чего состоит

Левая иконка
Правая иконка
Текст тэга
Поле тэга

Основные свойства

Тема (Theme)

Состояние (State)

Размер (Size)

Приоритет (Priority)

Форма (Form)

Отключаемые элементы

👁 Текст (Text)

👁 Левая иконка (Left icon)

👁 Правая иконка (right icon)

Редактируемые элементы

✏️ Текст (Text)

✏️ Левая иконка (Left icon)

✏️ Правая иконка (right icon)

Акцентный цвет (day)

Могут принимать акцентный цвет: фон главного тега (Primary), обводка вторичного тега (Secondary), текст, иконка слева, иконка справа вторичного тега (Secondary) при ховере — акцентного “Hover” цвета, при клике — акцентного “Active” цвета.

Акцентный цвет (night)

Могут принимать акцентный цвет: фон главного тега (Primary), обводка вторичного тега (Secondary), текст, иконка слева, иконка справа вторичного тега (Secondary) при ховере — акцентного “Hover” цвета, при клике — акцентного “Active” цвета.

Большое количество текста

Теги не могут быть в две строки.
Максимальное количество видимых символов в теге: 128. Остальные символы скрываются в троеточие. 
При размещении в контейнере в троеточие скрывается часть, которая не помещается.

Расположение

Теги располагаются в группах.
Могут быть расположены в контейнере и переноситься на новую строку. 
Могут скрываться в тег «еще». 
Могут скроллиться по горизонтали.
Могут находится внутри других компонентов, например, в селекте.