Badge
Badge — слово или число на маленькой цветной плашке рядом с заголовком, пунктом или в ячейке: «NEW», «BETA», «3 новых». Смысл задаёт tone, цвет подложки и текста назначает скин. Метка не кликается и не удаляется — это вывод.
Статус: experimental · в системе с 2026-09 · интерактивность: none (нет)
Когда использовать
- Пометка новизны или статуса рядом с названием: «NEW», «BETA», «PRO».
- Счётчик в пункте навигации или заголовке раздела: «3», «12 новых».
- Короткий признак в ячейке таблицы, где Status с подписью избыточен.
Не использовать:
- Метка выбирается, удаляется или несёт значение фильтра — это Tag.
- Состояние сущности со значком и подписью — это Status.
- Одна точка без текста — это Indicator.
Альтернативы:
Тоны
Пять тонов метки рядом с подписями.
12 NEW ACTIVE LIMIT BLOCKED
<!--
🟢
Пять тонов метки: без оценки, новое, подтверждено, внимание, ошибка.
-->
<script>
import Badge from "$lib/ui/Badge.svelte";
</script>
<div style="display: flex; align-items: center; gap: var(--sp-1);">
<Badge>12</Badge>
<Badge tone="info">NEW</Badge>
<Badge tone="success">ACTIVE</Badge>
<Badge tone="warning">LIMIT</Badge>
<Badge tone="error">BLOCKED</Badge>
</div>
В строке
Метка «NEW» у заголовка и счётчик у пункта.
Статистика BETA Новости 3
<!--
🟢
Метка в строке: «BETA» у заголовка раздела и счётчик новых у пункта.
-->
<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Badge from "$lib/ui/Badge.svelte";
</script>
<div style="display: flex; flex-direction: column; gap: var(--sp-1);">
<span style="display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-m); font-weight: var(--fw-medium);">
{t("Статистика")} <Badge tone="info">BETA</Badge>
</span>
<span style="display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-s);">
{t("Новости")} <Badge>3</Badge>
</span>
</div>