Badges, Pills,
Chips
Маленькие атомы — большая ответственность. Badge говорит о статусе. Pill считает. Chip — инструмент пользователя. Не путать.
Кто есть кто
Три похожих по форме элемента, три разных функции. Если путаются — значит, не тот тип.
Сообщает статус объекта. Read-only, не кликается.
Система. Меняется по логике, не юзером.
Считает количество. Цифра в капсуле.
Система. Обновляется автоматически.
Выбор пользователя — фильтр, тег, removable selection.
Юзер. Кликается, добавляется, убирается.
Badge — статусы
Шесть тонов. Префикс точкой — опционально, для dashboard-таблиц где статус критичен. Шрифт — mono, ВЕРХНИЙ РЕГИСТР, 11 px. Это маркер, не текст.
Семантика тонов — фиксированная
| Тон | Когда | Примеры |
|---|---|---|
| SUCCESS | Объект работает как ожидалось | ACTIVE, COMPLETED, PAID |
| INFO | В процессе, нейтрально-позитивно | RUNNING, PROCESSING, NEW |
| WARN | Требует внимания, не ошибка | PILOT, DRAFT, EXPIRES SOON |
| DANGER | Сломалось, ошибка, отказ | FAILED, BLOCKED, OVERDUE |
| NEUTRAL | Неактивно, отключено | ARCHIVED, DRAFT, INACTIVE |
| SOLID | Декларативный маркер, не статус | BETA, NEW, PRO |
Pill — счётчики
Цифра в круглой капсуле. Используется в навигации (badge непрочитанного), в табах (количество элементов), рядом с иконками. Не текст, только число.
В контексте — навигация
Chip — фильтры и выбор
Инструмент пользователя. Кликается. Может быть toggle (активный / нет), removable (с крестиком), или group — набор взаимоисключающих опций.
Когда что
Если сомневаешься — этот список.
| Что показываешь | Используй |
|---|---|
| Статус заказа («Доставлен», «В пути») | DELIVERED |
| Сколько непрочитанных уведомлений | 5 |
| Включена ли интеграция (вкл/выкл) | Switch / toggle, не chip |
| Активный фильтр в каталоге | Финтех × |
| «BETA» рядом с названием продукта | BETA |
| Тег у статьи в блоге (read-only) | Просто текст с ·, не chip |
| Категория, на которую можно нажать | Кейсы |
Do / Don't
Badge — один на объект. «ACTIVE» — и всё.
Стек из 3+ badge рядом. «ACTIVE · VERIFIED · PRO · NEW» — шум.
Badge — mono caps, 11 px. Нейтрально, не кричит.
Эмодзи в badge: «✓ Active», «🔥 New».
Pill для цифр и только. «12», «99+» — окей.
Pill с текстом: «Pro», «New» — это Badge, не Pill.
Chip — interactive. Hover, active, removable.
Chip без действия — тогда это tag / label, и его надо набрать текстом.
Принципы
- Один badge на объект. Если нужно два статуса — значит, объект сложный, и нужна другая UI форма.
- Цвет — семантика. Зелёный = success, красный = danger. Не меняем смысл «потому что красиво».
- Capitalization фиксирована. Badge — ВЕРХНИЙ. Chip — Sentence case. Pill — только цифры.
- Не злоупотребляем. На экране 1–3 badge — нормально. 10+ — дизайн сломан.
Tokens reference
| Element | Property | Value |
|---|---|---|
| Badge | height / padding | ~22 px / 4 × 10 |
| Badge | font | mono 11/500 caps 0.06em |
| Badge | radius | 6 px |
| Badge.success | bg / fg | success/10 · #16A34A |
| Badge.warn | bg / fg | warning/14 · #B58A07 |
| Badge.danger | bg / fg | destructive/10 · #DC2626 |
| Badge.info | bg / fg | primary/10 · #0048B2 |
| Pill | min-w / h | 20 × 20 px |
| Pill | font | Inter 12/600 |
| Pill | radius | --radius-full |
| Pill.dot | size | 8 × 8 px |
| Chip | height / padding | ~32 px / 6 × 12 |
| Chip | font | Inter 14/500 |
| Chip | radius | --radius-full |
| Chip.active | bg / fg | --foreground · #FAFAFA |