Counter

Использование

• В качестве содержимого используйте числа (5) или форматированные строки ("1,234", 5k).
• Не используйте для отображения текстовой информации.
• Для кастомных цветов обязательно указывайте appearance="custom"

Режимы отображения

Задаётся свойством mode.

• "primary" — акцентный индикатор. Используется для важных первичных уведомлений;
• "contrast" — индикатор контрастного цвета, заданного дизайн-системой (в стандартных темах - белый);
• "tertiary" — индикатор без фона с низким акцентом. Используется для уведомлений, которые не требует акцента;
• "inherit" — режим индикатора будет выбран в зависимости от контекста использования.

Визуальное оформление

Цвет

Задаётся свойством appearance.

"accent"

Значение задаёт индикатору акцентный цвет, который может меняться в зависимости от светлой или тёмной схемы.

"neutral"

Значение задаёт индикатору нейтральный цвет, который также может являться альтернативным акцентным цветом.

"accent-green"

Значение задаёт индикатору цвет позитивных уведомлений (чаще всего зеленый).

"negative"

Значение задаёт индикатору цвет критических уведомлений (чаще всего красный).

Пользовательский цвет

Чтобы задать свое пользовательское значение цвета счетчика, необходимо задать appearance="custom" и указать в свойстве color нужный цвет. Обратите внимание, что нужно обязательно указать свойство mode отличное от "inherit" (значение по умолчанию).

• При mode="primary" - изменяется фон.
• При mode="contrast" - изменяется цвет текста.
• При mode="tertiary" - изменяется цвет текста.
• При mode="inherit" - изменения не применяются.

Индикатор в кнопке

При использовании компонента в кнопках, индикатор самостоятельно подстраивается под внешний вид кнопки, руководствуясь значениями дизайн-системы.

Доступность (a11y)

Для скринридеров можно добавить поясняющий текст:

<Counter mode="primary" size="m">
  5<VisuallyHidden>новых сообщений</VisuallyHidden>
</Counter>

Свойства и методы