Определение
Chips (фишки) — компонент, позволяющий пользователям делать выбор, фильтровать контент или запускать триггерные действия. В отличие от кнопок, фишки не должны уводить пользователя с текущей страницы. Если действие требует загрузки новой страницы, используйте кнопку вместо фишки.
Варианты и состояния
Chips бывают 2 типов:
Основные правила
- Не используйте фишки в качестве кнопок призыва к действию. При помощи них можно инициировать действие немедленно, оставаясь на той же странице.
- Для группировки фишек необходимо применять контейнер chips group. Он представляет собой коллекцию chips. Область контейнера должна быть равна размеру фишек.
- Нельзя смешивать фишки разных типов и размеров в одном контейнере chips group.
- При использовании компонента, располагайте фишки в логическом порядке.
- Название фишки должно начинаться с заглавной буквы. Также необходимо избегать длинных названий.
Chip group бывает 2 типов:
- single select — компонент, в котором можно выбрать только одно значение, при этом автоматически отменяет выбор всех остальных фишек в группе;
- accessibility — компонент, в котором можно выбрать несколько значений, при этом состояния других фишек в группе не должны изменяться.
Построение
Соблюдение отступов внутри и снаружи — обязательное условие.