Badge

Паттерны

Встроенная метка статуса

Когда использовать:

• Строке или карточке нужен один компактный статус.

Заметки о композиции:

• Делайте текст очень коротким.
• Сочетайте бейдж с окружающим содержимым, которое объясняет помеченный объект.

Компромиссы:

• Очень компактно.
• Плохо подходит для поясняющей обратной связи.

import { Badge, Text } from '@vega-ui/react';

const releases = [
  { version: 'v2.8.0', date: 'Nov 3, 2026', status: 'Live', variant: 'success' },
  { version: 'v2.8.0-rc.2', date: 'Oct 30, 2026', status: 'Rolling back', variant: 'warning' },
  { version: 'v2.7.4', date: 'Oct 21, 2026', status: 'Failed', variant: 'error' },
  { version: 'v2.7.3', date: 'Oct 14, 2026', status: 'Archived', variant: 'info' },
];

export default function BasicUsage() {
  return (
    <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 'var(--spacing-6)', width: '100%', maxWidth: 420 }}>

Флаг метаданных

Когда использовать:

• Небольшие вспомогательные метаданные должны стоять рядом с заголовком или подписью поля.

Заметки о композиции:

• Для второстепенных метаданных используйте менее акцентный внешний вид.
• Бейдж должен визуально оставаться подчинённым основному содержимому.

Компромиссы:

• Легко считывается при беглом просмотре.
• Легко злоупотребить и создать визуальный шум.

import { Badge, Heading, Text } from '@vega-ui/react';

export default function HeadingFlags() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-10)', width: '100%', maxWidth: 520 }}>
      <div style={{ display: 'grid', gap: 'var(--spacing-2)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-4)' }}>
          <Heading as='h3' size={4} fontWeight={600}>Usage-based billing</Heading>
          <Badge size='xs' variant='info' appearance='outline'>Beta</Badge>
        </div>
        <Text size={2} style={{ color: 'var(--label-secondary)' }}>Charge customers for API calls, seats or storage.</Text>
      </div>

Бейдж-счётчик

Когда использовать:

• Достаточно короткого числового сигнала или счётчика.

Заметки о композиции:

• Предпочитайте очень короткие числа.
• Не помещайте большие числа или длинные подписи в крошечный бейдж.

Компромиссы:

• Хорошо подходит для компактных счётчиков.
• Теряет ясность, когда текст становится длиннее.

import { useState } from 'react';
import { Badge, Button, Text, VisuallyHidden } from '@vega-ui/react';

const max = 99;

export default function UnreadCount() {
  const [count, setCount] = useState(7);

  let shown = String(count);
  if (count > max) shown = `${max}+`;

  let label = `${count} unread messages`;

Сравнение

Быстрое правило выбора

Используйте Badge для компактных метаданных, а не для полноценных сообщений обратной связи.

Badge или Alert

Используйте Badge, когда:

• содержимое — короткий статус или метка категории

Используйте Alert, когда:

• интерфейсу нужно более полное сообщение обратной связи с иерархией

Главный компромисс: бейдж — компактные метаданные, а alert — явное сообщение обратной связи.

Badge или Card

Используйте Badge, когда:

• нужна лишь крошечная встроенная метка

Используйте Card, когда:

• сгруппированному содержимому нужна поверхность-контейнер

Главный компромисс: бейдж — это метка, а карточка — поверхность для раскладки.

Badge или Link

Используйте Badge, когда:

• содержимое — метаданные о статусе или категории

Используйте Link, когда:

• текст должен куда-то вести

Выбирайте этот компонент, когда

• Содержимое короткое, компактное и похоже на метаданные.
• Элемент должен оставаться визуально небольшим.
• Интерфейсу нужна метка категории или статуса.
• паттерн должен оставаться подчинённым окружающему содержимому

Не выбирайте этот компонент, когда

• Содержимое — полноценное сообщение.
• Интерфейсу нужна поверхность-контейнер.
• Статус нельзя объяснить одной крошечной меткой.

Решение проблем

Текст бейджа кажется слишком длинным

Симптом

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

Вероятная причина

Текст слишком длинный для компактной метки метаданных.

Как проверить

• Проверьте, понятен ли текст с одного быстрого взгляда.
• Сравните его с соседними заголовками или основным текстом.

Исправление

• Сократите подпись.
• При необходимости перенесите объяснение в окружающий текст.

Бейдж несёт слишком большую смысловую нагрузку

Симптом

Пользователи упускают важный смысл, потому что единственный сигнал — крошечный цветной бейдж.

Вероятная причина

Продукт сообщает статус только через бейдж.

Как проверить

• Скройте бейдж и проверьте, остаётся ли состояние понятным.

Исправление

• Добавьте окружающий текст, заголовки или структуру, объясняющие статус.