Chip

Chip — многофункциональный элемент дизайн-системы, который позволяет пользователю:

Выбирать варианты из списка
Фильтровать контент
Вводить пользователей или ключевые слова в список
Отображать информацию о количестве выбранных вариантов
Запускать функции

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

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

Иконка слева
Текст чипа
Иконка справа
Аватар
Счетчик

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

Тема (Theme)

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

Размер (Size)

Стиль (Style)

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

Форма (Form)

Позиция счетчика (Counter position)

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

👁 Текст (Text)

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

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

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

✏️ Текст (Text)

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

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

✏️ Аватар (Avatar)

✏️ Числовое значение счетчика (Counter)

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

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

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

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

Цвет счетчика

Счетчик фиксированного цвета, аналогично компоненту «бэйдж».

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

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

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

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

Множественный / Одиночный выбор

Два режима: можно выбрать только один чип или сразу несколько.

Фильтр

Чипы являются элементами фильтрации, по которым сортируется содержимое блока/страницы.