Badge для счётчиков

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

Импорт и базовое использование

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

import Badge from '@mui/material/Badge';
import MailIcon from '@mui/icons-material/Mail';

Простейший пример применения:

<Badge badgeContent={4} color="primary">
  <MailIcon />
</Badge>

badgeContent – число или элемент, который отображается в бейджике.
color – цвет бейджа. MUI предоставляет стандартные цвета: primary, secondary, error, info, success, warning.

В этом примере над иконкой почты отображается счётчик с числом 4.

Настройка внешнего вида

1. Размер бейджа

MUI позволяет изменять размер бейджа через свойство variant и встроенные CSS-классы.

<Badge badgeContent={10} color="error" variant="dot">
  <MailIcon />
</Badge>

variant=“dot” – отображает маленький точечный индикатор вместо числа. Используется для простых сигналов о новом событии без конкретного счётчика.

2. Позиционирование

Расположение бейджа относительно дочернего компонента можно настроить через свойства anchorOrigin:

<Badge
  badgeContent={7}
  color="secondary"
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}
>
  <MailIcon />
</Badge>

vertical – позиция по вертикали (top или bottom).
horizontal – позиция по горизонтали (left или right).

Это позволяет гибко располагать индикатор в зависимости от дизайна.

3. Ограничение максимального значения

Если число в бейдже может быть большим, есть смысл использовать max, чтобы показывать, например, 99+:

<Badge badgeContent={120} max={99} color="error">
  <MailIcon />
</Badge>

При этом все значения выше 99 будут отображаться как 99+.

Интерактивные бейджи

Badge может быть интерактивным, например, использоваться в кнопках или иконках с кликабельной функциональностью:

import IconButton from '@mui/material/IconButton';

<IconButton aria-label="show 5 new mails">
  <Badge badgeContent={5} color="primary">
    <MailIcon />
  </Badge>
</IconButton>

Использование IconButton с Badge улучшает UX, позволяя пользователю сразу реагировать на новые уведомления.

Пользовательский стиль

MUI поддерживает кастомизацию через sx или стили с makeStyles/ styled. Пример с sx:

<Badge
  badgeContent={3}
  color="success"
  sx={{
    '& .MuiBadge-badge': {
      fontSize: '0.75rem',
      height: 20,
      minWidth: 20,
      borderRadius: '50%',
      border: '2px solid white',
      padding: '0 6px',
    },
  }}
>
  <MailIcon />
</Badge>

fontSize – размер текста внутри бейджа.
height, minWidth, borderRadius – форма бейджа, позволяет делать его круглым или овальным.
border – создаёт визуальный отступ между бейджем и иконкой.

С помощью sx или styled компонента можно полностью контролировать внешний вид, включая цвета, анимации и позиции.

Badge без контента

Для простого индикатора без чисел используется комбинация variant="dot" и invisible для условного отображения:

<Badge color="error" variant="dot" invisible={notifications === 0}>
  <MailIcon />
</Badge>

invisible – скрывает бейдж при определённом условии.
В данном случае бейдж не отображается, если нет уведомлений.

Комбинирование с другими компонентами

Badge легко интегрируется с Tabs, List, Avatar и другими компонентами MUI:

import Avatar from '@mui/material/Avatar';

<Badge badgeContent={2} color="info">
  <Avatar alt="User Name" src="/static/images/avatar/1.jpg" />
</Badge>

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

Анимация появления и скрытия

MUI поддерживает анимацию через компонент Zoom, который оборачивает Badge:

import Zoom from '@mui/material/Zoom';

<Zoom in={showBadge}>
  <Badge badgeContent={5} color="secondary">
    <MailIcon />
  </Badge>
</Zoom>

in – контролирует появление/исчезновение с анимацией.
Можно использовать также Fade или Grow для других эффектов.