Дизайн в БАРС Груп

Определение

Chips (Фишки) — это компонент, позволяющий пользователям делать выбор, фильтровать контент или запускать триггерные действия. В отличие от кнопок, фишки не должны уводить с текущей страницы. Если действие требует загрузки новой страницы, используйте кнопку вместо фишки.

Функциональность

Используются для фильтрации контента, выбора или выполнения действий. В отличие
от Кнопок (Button), Chips не перенаправляют пользователя на другую страницу.

Реагируют на наведение курсора и фокус клавиатуры, так как являются интерактивными элементами

Если у вас много элементов с разными характеристиками, используйте Chips для группировки контента по общим признакам. Chips помогут пользователям выделить то, что наиболее соответствует их ожиданиям или задаче, отделяя важную информацию от остального контента. Это упрощает навигацию и облегчает поиск нужных данных.

Для указания количества объектов в компоненте, можно включить параметр Бейдж счетчик (Badge Counter)

Фишки делятся на два типа: «одиночный выбор» и «множественный выбор».

В режиме одиночного выбора пользователь может выбрать только один элемент из группы.
В режиме множественного выбора возможно выделение нескольких элементов одновременно, что позволяет более гибко фильтровать и организовывать информацию.

Дизайн и Стиль

Размер и Форма

Состоит из компонентов: Иконка, Текст и Бейдж счетчик (Badge Counter)

Chips имеет три размера S, M, L

Могут быть сопоставимы по размеру с кнопками, но никогда не должны быть больше.
Это сохраняет баланс в интерфейсе, делая Chips визуально гармоничными и удобными
для взаимодействия.

Тип

Фишки имеют 3 типа отображения

Closable – фишки, которые можно удалить с рабочей области. Не имеют состояний
Strong Brand – фишки в цвет бренда
Strong Neutral – нейтральные фишки, которые не зависят от бренда

Фильтры могут быть преднастроенными, это означает, что система отображает
их по умолчанию. Например, для быстрой фильтрации «Моих задач» такие Chips будут отображаться без крестика и возможности их удаления, поскольку они заданы как стандартные фильтры и не подлежат удалению пользователем.

Если пользователь самостоятельно добавил фильтрацию, рядом с преднастроенными Chips появляются Chips с крестиком (Closable), которые можно удалить, когда фильтр больше не актуален. Они не имеют состояний, их нельзя активировать, поскольку они уже выбраны (активны) и не требуют дополнительного взаимодействия.

Цвет и Контраст

Соблюдайте общие цветовые правила дизайн-системы. Палитра Plex отвечает стандартам контрастности WCAG.

Текст и иконки

Краткость текста

Используйте короткий и легко воспринимаемый текст в Chips. Это помогает пользователям быстро понять смысл и взаимодействовать с элементами интерфейса без лишних усилий.

Иконки (по необходимости)

В зависимости от контекста можно включать дополнительные визуализации через параметр «Leading?», выбирая между иконкой и Аватором (Avatar) в подпараметре «Leading visual»