Badge

Компонент Badge используется для отображения небольших значков с количеством уведомлений или состояния элемента интерфейса. Он является частью библиотеки Ant Design и предоставляет удобный способ визуального обозначения активности, статуса или новых элементов.

Основные свойства Badge

Ant Design предоставляет следующие ключевые свойства для компонента Badge:

  • count — число, отображаемое внутри бейджа. Может быть числом или строкой. Если значение превышает overflowCount, будет показано с суффиксом «+».

    <Badge count={5} />
<Badge count={100} overflowCount={99} />

  • overflowCount — максимальное число, после которого отображается в формате «99+». По умолчанию равно 99.

  • dot — логическое значение, отображает только маленькую точку без числа. Используется для индикации активности или уведомления без конкретного количества.

    <Badge dot>
  <a href="#">Сообщения</a>
</Badge>

  • showZero — отображает бейдж даже при значении 0. По умолчанию false.

    <Badge count={0} showZero>
  <a href="#">Задачи</a>
</Badge>

  • status — определяет статус элемента. Может принимать значения: "success", "processing", "default", "error", "warning". В этом случае count игнорируется, отображается цветная точка с текстом.

    <Badge status="success" text="Выполнено" />
<Badge status="error" text="Ошибка" />

  • text — текст, отображаемый рядом с бейджем, особенно актуально при использовании status.

Использование с иконками и элементами

Badge часто комбинируется с другими компонентами, например, с кнопками или иконками. Для этого используется вложение:

import { Badge, MailOutlined } from 'antd';

<Badge count={5}>
  <MailOutlined style={{ fontSize: 24 }} />
</Badge>

В этом примере бейдж с числом «5» отображается поверх иконки почты. Это стандартная практика для уведомлений.

Размещение и позиционирование

Ant Design позволяет контролировать позицию бейджа через CSS и свойства style. Например, можно сместить бейдж относительно иконки:

<Badge count={99} style={{ backgroundColor: '#52c41a' }}>
  <a href="#">Уведомления</a>
</Badge>

Можно также использовать offset для точного позиционирования:

<Badge count={10} offset={[10, 0]}>
  <a href="#">Сообщения</a>
</Badge>

Стилизация

Для кастомизации внешнего вида доступны следующие подходы:

  • Изменение цвета через свойство style:

    <Badge count={5} style={{ backgroundColor: '#f5222d' }} />

  • Изменение формы и размера с помощью CSS-классов. Компонент поддерживает стандартные классы Ant Design (ant-badge, ant-badge-count, ant-badge-dot) для точечной стилизации.

  • Использование dot вместо count для маленьких индикаторов:

    <Badge dot>
  <span className="example" />
</Badge>

Комбинирование с React элементами

Badge отлично интегрируется с динамическими компонентами React. Например, можно обновлять счетчик через состояние:

import { useState } from 'react';
import { Badge, Button } from 'antd';

const NotificationCounter = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <Badge count={count}>
        <Button>Уведомления</Button>
      </Badge>
      <Button onCl ick={() => setCount(count + 1)}>Добавить уведомление</Button>
    </>
  );
};

Адаптивное отображение

Badge автоматически корректирует размер и позицию в зависимости от родительского элемента. Для точечной версии (dot) он будет минимально инвазивным, а для числовой версии — расширяется по числу, оставаясь визуально компактным.

Сочетание с статусами

Для отображения текущего состояния системы или элемента интерфейса лучше использовать сочетание status и text:

<Badge status="processing" text="В процессе" />
<Badge status="warning" text="Предупреждение" />
<Badge status="default" text="Неактивно" />

Каждый статус имеет стандартный цвет, но можно переопределять стиль через CSS:

.ant-badge-status-dot {
  background-color: #faad14; /* кастомный желтый */
}

Практические советы

  • Dot vs Count — используйте dot для сигнализации активности без точного числа, count — для явного числа уведомлений.
  • showZero — полезно для отображения элементов, даже если уведомлений нет.
  • Status — для системных уведомлений, где важен цветовой индикатор, а не число.
  • OverflowCount — предотвращает переполнение при больших значениях, показывая понятный формат.

Использование Badge в Ant Design позволяет создавать интуитивно понятные уведомления и индикаторы, поддерживая визуальную последовательность и стандарты дизайна в приложениях на React.

Оглавление