НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Бейдж

Бейдж с первого взгляда показывает статус или число: короткую подпись, счётчик или точку. Это содержимое, а не элемент управления.

Стабильный Figma
ОбзорИспользованиеAPIДоступность
Active 
<tk-badge tone="success">Active</tk-badge>
<tk-badge tone="error" treatment="solid" count="120" label="120 unread notifications"></tk-badge>
<tk-badge dot tone="success" label="Online"></tk-badge>

Анатомия

Бейдж бывает трёх видов. Если задано несколько, dot важнее count, а count важнее подписи.

Вид Высота Что это
подпись (слот по умолчанию) 20px плашка с одним-двумя словами статуса
count 16px плашка с числом; больше max показывается как «99+»
dot 8px цветная точка без текста

Тоны и заливка

Draft In review Stable Expiring Failed
<tk-badge>Draft</tk-badge>
<tk-badge tone="info">In review</tk-badge>
<tk-badge tone="success">Stable</tk-badge>
<tk-badge tone="warning">Expiring</tk-badge>
<tk-badge tone="error">Failed</tk-badge>

tone задаёт смысл: neutral (по умолчанию), info, success, warning или error.

treatment="solid" заливает бейдж цветом, а не подкрашивает. Для большинства бейджей оставляйте subtle (по умолчанию), а solid берите для счётчиков уведомлений и статусов, которые должны выделяться. К точке treatment не применяется.

Draft Stable 
<tk-badge treatment="solid">Draft</tk-badge>
<tk-badge treatment="solid" tone="success">Stable</tk-badge>
<tk-badge treatment="solid" tone="error" count="3" label="3 failed checks"></tk-badge>

Счётчики

<tk-badge count="3" label="3 updates"></tk-badge>
<tk-badge count="42" label="42 updates"></tk-badge>
<tk-badge count="120" label="120 updates"></tk-badge>
  • max (по умолчанию 99) ограничивает число: 120 показывается как «99+».
  • count="0" тоже показывается. Если считать нечего, скрывайте бейдж сами.
  • Рядом с подписанной целью, например кнопкой «Уведомления», хватит числа. Если бейдж стоит один, задайте label.

Точки

<tk-badge dot tone="success" label="Online"></tk-badge>
<tk-badge dot tone="warning" label="Away"></tk-badge>
<tk-badge dot></tk-badge>

По умолчанию скринридер точку не читает. Если она что-то значит, например «в сети» или «есть обновления», задайте label или поставьте её рядом с текстом того же смысла. Одного цвета мало.

На аватаре

Положите бейдж в слот badge у Avatar. Аватар сам его расставит: счётчик в верхний угол, точку или подпись в нижний. Один бейдж на аватар. Точка подходит аватарам от 24 до 48px, счётчик читается на 40px и больше.

<tk-avatar shape="circle" name="Mira Petrova"><tk-badge slot="badge" dot tone="success" label="Online"></tk-badge></tk-avatar>
<tk-avatar size="40" shape="circle" name="Ada Lovelace"><tk-badge slot="badge" count="5" tone="error" treatment="solid" label="5 unread messages"></tk-badge></tk-avatar>