Badge

Badge — компактная метка статуса или категории для счётчиков, состояний и небольших метаданных.

Обзор

Стилизация Badge сосредоточена в одной компактной поверхности с переменными размера, внешнего вида и семантического варианта.

Публичные CSS-переменные

Active

Beta

Переменная	Значение	Влияет на
Высота и минимальная ширина.`Badge`		В этом состоянии изменений не видно
Размер текста.`Badge`		В этом состоянии изменений не видно
Цвет фона.`Badge`		В этом состоянии изменений не видно
Цвет обводки.`Badge`		В этом состоянии изменений не видно
Цвет текста.`Badge`		В этом состоянии изменений не видно
Насыщенность, добавляемая к акцентному цвету в тонированном фоне.`Badge`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные частей

Badge: отвечает за всю поверхность бейджа.

Взаимодействие состояний и вариантов

size меняет высоту и размер шрифта.
appearance переключает оформление: заливка, поверхность, обводка или ghost.
variant меняет семантическую цветовую группу.

Примеры

.compactBadge {
  --badge-size: 18px;
}

.brandBadge {
  --badge-border-radius-ratio: 0.5;
}

Не переопределяйте

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