Определение

Badge counter (Бейдж счетчик) — это графический элемент, который отображает числовую информацию, в частности, количество уведомлений, непрочитанных сообщений или элементов в списке.

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

Идентификация

Badge Counter Semantic привлекает внимание пользователя к определенным данным или событиям, которые требуют его внимания или действия. Он помогает визуально выделить важные элементы интерфейса и подсказывает пользователю, что есть новая информация или что есть что-то, что требует его внимания.

Badge Counter Semantic указывает количество соответствующих элементов. Обычно он располагается рядом с иконкой или текстом, связанным с этими элементами.

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

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

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

Badge Counter Semantic представлен в виде округлой формы с фиксированной высотой и адаптивной шириной. Размеры компонента по высоте: 16, 20 и 24 пикселя

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

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

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

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

В Badge Counter Semantic могут используются только цифры

Правильно

Неправильно

Иконки

В Badge Counter иконки не используются

Параметры

Размеры

Семантический цвет

Badge Counter может иметь различные семантические цвета, такие как информационный, нейтральный, успешный, предупреждение или ошибочный. Так же имеется цвет бренда. Badge не может быть использован с другими палитрами.

Тип

Используйте различные типы Badge Counter от контекста интерфейса.

Анатомия