Badge

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

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

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

  • colorScheme – задает цветовую схему компонента, например "red", "green", "blue". Цвет применяется к фону и тексту, автоматически подбирается контрастный цвет текста.

  • variant – определяет стиль отображения:

    • "subtle" – мягкий фон с контрастным текстом.
    • "solid" – насыщенный фон.
    • "outline" – рамка с прозрачным фоном.

  • size – размеры компонента, могут быть "sm", "md", "lg". Размер влияет на высоту, внутренние отступы и шрифт.

  • children – содержимое бейджа, обычно текст или иконка.

Пример базового использования:

import { Badge } from "@chakra-ui/react";

function Example() {
  return <Badge colorScheme="green">Активный</Badge>;
}

Варианты визуализации

1. Subtle Мягкий, ненавязчивый бейдж, хорошо подходит для статусов и тегов:

<Badge colorScheme="blue" variant="subtle">Новый</Badge>

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

<Badge colorScheme="red" variant="solid">Ошибка</Badge>

3. Outline Бейдж с рамкой, минималистичный и легкий визуально:

<Badge colorScheme="purple" variant="outline">Premium</Badge>

Интеграция с иконками

Для усиления визуального эффекта бейджи могут содержать иконки. Используются компоненты из @chakra-ui/icons или сторонние иконки:

import { Badge } from "@chakra-ui/react";
import { CheckIcon } from "@chakra-ui/icons";

<Badge colorScheme="green" variant="solid">
  <CheckIcon mr={1} />
  Успешно
</Badge>

Здесь mr={1} добавляет небольшой отступ справа от иконки, чтобы текст не сливался с графическим элементом.

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

Бейджи часто комбинируются с Box, Flex, HStack или VStack для создания списков, карточек и панелей:

import { Box, Badge, VStack } from "@chakra-ui/react";

<VStack align="start" spacing={3}>
  <Box>
    Сообщение 1 <Badge colorScheme="blue">Новый</Badge>
  </Box>
  <Box>
    Сообщение 2 <Badge colorScheme="yellow" variant="outline">Важное</Badge>
  </Box>
</VStack>

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

Адаптивность и стилизация

Badge наследует стили от chakra компонента, что позволяет использовать пропсы для адаптивности:

  • fontSize – настройка размера текста.
  • px, py – горизонтальные и вертикальные отступы.
  • borderRadius – закругление углов, по умолчанию md, можно задавать full для круглых бейджей.

Пример круглого бейджа:

<Badge colorScheme="teal" borderRadius="full" px={4}>
  Новинка
</Badge>

Динамическое управление

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

import { Badge } from "@chakra-ui/react";
import { useState } from "react";

function Notifications() {
  const [count, setCount] = useState(5);

  return (
    <Badge colorScheme="red">
      {count} уведомлений
    </Badge>
  );
}

При изменении count содержимое бейджа автоматически обновляется.

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

Chakra UI автоматически адаптирует бейджи под цветовую схему темы. colorScheme работает корректно как в светлой, так и в темной теме, обеспечивая нужный контраст и читабельность текста без дополнительных настроек.

Ключевые рекомендации по применению

  • Статусные бейджи: использовать subtle для второстепенных статусов и solid для критических.
  • Теги и категории: применять outline или subtle для визуального разделения контента.
  • Иконки: добавлять только при необходимости для усиления визуального смысла.
  • Адаптивность: использовать size и px/py для согласованности с другими компонентами интерфейса.
  • Динамика: интегрировать с состояниями и данными, чтобы бейджи были интерактивными и информативными.

Бейджи в Chakra UI — это компактный и гибкий инструмент для визуального выделения информации, легко настраиваемый под любой интерфейс и поддерживающий современные практики адаптивного дизайна.

Оглавление