Badge

Badge — это компонент визуального индикатора, предназначенный для отображения небольшого количества информации поверх другого элемента интерфейса. Чаще всего используется для:

отображения количества уведомлений;
обозначения новых элементов;
сигнализации о состоянии объекта;
маркировки вкладок, иконок и кнопок.

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

В библиотеке Element Plus компонент реализован как ElBadge.

Подключение компонента

После установки библиотеки Element Plus компонент доступен для использования внутри шаблонов Vue.

import { ElBadge } from 'element-plus'

В шаблоне компонент используется следующим образом:

<el-badge :value="12">
  <el-button>Уведомления</el-button>
</el-badge>

Badge автоматически позиционируется относительно вложенного элемента.

Базовое использование

Минимальная конфигурация требует передачи значения через свойство value.

<el-badge :value="5">
  <el-button>Сообщения</el-button>
</el-badge>

Результат:

поверх кнопки отображается небольшая красная метка;
внутри метки выводится число 5.

Компонент поддерживает размещение практически поверх любого элемента:

кнопок
иконок
вкладок
изображений
текстовых блоков

Пример с иконкой:

<el-badge :value="8">
  <el-icon><Bell /></el-icon>
</el-badge>

Текстовое значение Badge

Badge может отображать не только числа, но и строковые значения.

<el-badge value="new">
  <el-button>Письма</el-button>
</el-badge>

Возможные применения:

пометка new
обозначение hot
статус beta
любые короткие текстовые маркеры

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

Если количество уведомлений может быть большим, используется свойство max. При превышении указанного значения выводится формат max+.

<el-badge :value="120" :max="99">
  <el-button>Уведомления</el-button>
</el-badge>

Результат отображения:

99+

Параметр полезен для:

систем уведомлений
сообщений
корзины интернет-магазина

Пример:

<el-badge :value="320" :max="999">
  <el-icon><Message /></el-icon>
</el-badge>

Режим точки (Dot Badge)

Badge может использоваться как простой индикатор без числового значения. Для этого применяется свойство is-dot.

<el-badge is-dot>
  <el-button>Обновления</el-button>
</el-badge>

Результат:

отображается маленькая точка;
значение внутри отсутствует.

Типичные сценарии:

индикатор непрочитанных сообщений
обозначение активности пользователя
сигнал о появлении нового контента

Скрытие Badge

Иногда требуется программно скрывать индикатор. Для этого используется свойство hidden.

<el-badge :value="3" :hidden="isHidden">
  <el-button>Уведомления</el-button>
</el-badge>

const isHidden = ref(false)

При значении true Badge полностью исчезает из интерфейса.

Это позволяет реализовать:

динамическое отображение уведомлений
очистку индикатора после просмотра сообщений
управление состоянием через реактивные данные Vue.

Изменение позиции Badge

По умолчанию Badge располагается в правом верхнем углу элемента. Позицию можно скорректировать с помощью свойства offset.

<el-badge :value="6" :offset="[10, 10]">
  <el-button>Почта</el-button>
</el-badge>

Формат:

[offsetX, offsetY]

Где:

offsetX — горизонтальное смещение
offsetY — вертикальное смещение

Пример:

<el-badge :value="10" :offset="[-5, 5]">
  <el-icon><ChatDotRound /></el-icon>
</el-badge>

Это особенно полезно при работе с:

кастомными иконками
нестандартными размерами элементов
сложными интерфейсами.

Типы Badge

Badge поддерживает несколько цветовых типов через свойство type.

Доступные варианты:

Тип	Назначение
primary	основной
success	успешная операция
warning	предупреждение
danger	ошибка
info	информационный

Пример:

<el-badge :value="8" type="success">
  <el-button>Задачи</el-button>
</el-badge>

Другой пример:

<el-badge value="!" type="warning">
  <el-icon><Warning /></el-icon>
</el-badge>

Цвет автоматически соответствует дизайн-системе Element Plus.

Отображение Badge без дочернего элемента

Badge может использоваться как самостоятельный элемент.

<el-badge :value="4" />

В таком случае он отображается как отдельная метка.

Это удобно для:

списков
таблиц
меток статуса

Пример:

<div>
  Заказы <el-badge :value="12" />
</div>

Использование в списках

Badge часто применяется в интерфейсах навигации.

<ul>
  <li>
    Входящие
    <el-badge :value="15" />
  </li>

  <li>
    Отправленные
    <el-badge :value="2" type="success" />
  </li>
</ul>

Это позволяет визуально показывать:

количество элементов
статус активности
обновления данных.

Использование во вкладках

Badge хорошо сочетается с компонентом Tabs.

<el-tabs>
  <el-tab-pane label="Сообщения">
    <template #label>
      <el-badge :value="5">
        <span>Сообщения</span>
      </el-badge>
    </template>
  </el-tab-pane>
</el-tabs>

Подобная конструкция применяется в:

почтовых клиентах
системах уведомлений
панелях администратора.

Интеграция с реактивными данными Vue

Badge легко связывается с реактивным состоянием.

<template>
  <el-badge :value="notifications">
    <el-button>Уведомления</el-button>
  </el-badge>
</template>

<script setup>
import { ref } from 'vue'

const notifications = ref(3)
</script>

Изменение значения автоматически обновляет интерфейс.

Пример увеличения количества:

notifications.value++

Практический пример: центр уведомлений

<template>
  <div class="notification-panel">

    <el-badge :value="messages">
      <el-button>Сообщения</el-button>
    </el-badge>

    <el-badge :value="alerts" type="warning">
      <el-button>Предупреждения</el-button>
    </el-badge>

    <el-badge :value="tasks" type="success">
      <el-button>Задачи</el-button>
    </el-badge>

  </div>
</template>

<script setup>
import { ref } from 'vue'

const messages = ref(12)
const alerts = ref(2)
const tasks = ref(5)
</script>

Подобная структура используется в:

административных панелях
корпоративных порталах
системах мониторинга.

Стилизация Badge

Хотя Element Plus предоставляет готовый дизайн, внешний вид можно изменять через CSS.

Пример:

.el-badge__content {
  font-size: 12px;
  font-weight: 600;
}

Изменение размеров:

.el-badge__content {
  min-width: 22px;
  height: 22px;
}

Дополнительная кастомизация позволяет адаптировать компонент под:

фирменный стиль
дизайн-систему проекта
темную тему интерфейса.

Производительность и рекомендации

При использовании Badge в крупных интерфейсах следует учитывать несколько особенностей.

Минимизировать частые обновления

Если значение Badge обновляется очень часто (например, в реальном времени), рекомендуется:

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

Не перегружать интерфейс

Слишком большое количество индикаторов может усложнять восприятие интерфейса.

Рекомендуется использовать Badge только для:

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

Использовать ограничение max

Большие числа ухудшают читаемость, поэтому лучше применять формат 99+.

Основные свойства компонента

Свойство	Тип	Описание
value	number / string	значение Badge
max	number	максимальное отображаемое число
is-dot	boolean	режим точки
hidden	boolean	скрытие Badge
type	string	цветовой тип
offset	array	смещение позиции

Основные сценарии применения

Badge используется в интерфейсах для решения нескольких задач:

Системы уведомлений

новые сообщения
комментарии
обновления системы

Электронная коммерция

количество товаров в корзине
акции и предложения

Социальные сети

лайки
упоминания
личные сообщения

Административные панели

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

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