Определение

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

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

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

Badge семантический элемент, который информирует пользователя о статусе контента.

Badge не кнопка, а статус/индикатор, для обозначения чего-то конкретного используйте тег.

Правильно

Неправильно

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

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

Badge должен быть достаточно маленьким, чтобы не отвлекать внимание, но достаточно заметным для быстрого восприятия

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

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

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

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

Используйте краткий и понятный текст в Badge. Максимальная ширина текста ограничена 192px. Если текст превышает этот лимит, он автоматически обрезается и заменяется многоточием для сохранения компактности.

Правильно

Неправильно

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

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

Параметры

Размеры

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

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

Тип

Используйте тип от контекста интерфейса. Если в большом объеме данных, например таблицы, лучше использовать менее контрастные типы (Outline и Subtle), то для того чтобы обратили внимание и точно иденцифицировали информацию бейджа, лучше использовать контрастный тип (Solid)

Включение компонентов

Анатомия