Генератор бейджей

• Мгновенное создание бейджей: создавайте CSS-бейджи и pill-компоненты мгновенно с нашим генератором. Настраивайте текст, размер, цвет, вариант и форму в реальном времени — предпросмотр обновляется сразу при любом изменении. Без обращений к серверу и ожидания.
• Приватно — без загрузки на сервер: генератор бейджей работает полностью в вашем браузере. Все конфигурации бейджей, выбор цветов и сгенерированный код остаются на вашем устройстве — ничего не загружается на сервер.
• 12 цветовых пресетов и собственные цвета: выбирайте из 12 встроенных пресетов для распространённых типов бейджей: Primary, Success, Warning, Error, Info, Neutral, мягкий, контурный, интерактивный и пресеты размеров. Каждый пресет применяет полную конфигурацию — цвета, вариант, размер и опции — либо настраивайте каждую деталь вручную.
• Копирование HTML + CSS в один клик: копируйте сгенерированный HTML-сниппет, стили CSS или и то, и другое вместе одним кликом. Генератор бейджей создаёт готовый к продакшену код с чистыми именами классов, правильной inline-flex-вёрсткой и полными hover/интерактивными состояниями.

• Бейджи статуса для UI-компонентов: разработчики React и Vue используют генератор бейджей для создания индикаторов статуса для таблиц данных, карточек дашборда и элементов списков. Сгенерированные бейджи работают напрямую с фреймворками компонентов — вставьте CSS в таблицу стилей и используйте HTML как шаблон компонента для статусов заказов, ролей пользователей и системных уведомлений.
• Ярлыки товаров в e-commerce: интернет-магазины используют генератор бейджей для создания ярлыков товаров вроде «Акция», «Новинка», «Хит продаж» и «Ограниченная серия». Используйте интерактивный pill-пресет с фирменными цветами, чтобы бейджи привлекали внимание, не перекрывая изображение товара. Вариант с контуром хорошо подходит для ненавязчивой маркировки.
• Бейджи уведомлений в мобильных приложениях: дизайнеры мобильного UI используют генератор бейджей для прототипирования счётчиков уведомлений, индикаторов непрочитанного и точек статуса для интерфейсов мобильных приложений. Размеры XS и SM с формой pill создают привычный вид бейджа уведомлений, работающий в навигационных элементах iOS и Android.
• Метки и теги контента CMS: создатели сайтов на WordPress и CMS используют генератор бейджей для создания тегов категорий, меток записей и индикаторов типа контента. Мягкий вариант идеален для метаданных записи блога — он обеспечивает визуальное различие без тяжести залитых бейджей, сохраняя фокус на контенте.
• Бейджи токенов дизайн-систем: специалисты, поддерживающие дизайн-системы, используют генератор бейджей для создания согласованных бейджей, использующих цвета дизайн-токенов. Сгенерированный CSS использует настраиваемые имена классов и значения цветов, которые можно сопоставить с CSS-переменными, что упрощает тематизацию бейджей в светлом и тёмном режимах.
• Теги ролей и разрешений пользователей: SaaS-приложения используют генератор бейджей для создания бейджей ролей пользователей — Admin, Moderator, Editor, Subscriber — с разными цветами для каждой роли. Опция точки-индикатора добавляет визуальный сигнал статуса, а опция кнопки закрытия позволяет создавать удаляемые интерфейсы в стиле тегов для чипов-фильтров и списков выбора.

Бейдж (также называемый pill, тег, чип или метка) — это небольшой строчный UI-элемент для маркировки, категоризации или выделения контента. Бейджи обычно компактны, имеют выраженный цвет фона и используют скруглённые углы или pill-формы, чтобы выделяться на фоне окружающего контента. Распространённые примеры включают счётчики уведомлений («3»), индикаторы статуса («Активен», «В ожидании»), метки контента («Новое», «Акция») и теги ролей пользователей («Админ»). Наш генератор бейджей создаёт готовый к продакшену HTML и CSS для компонентов бейджей, которые можно использовать напрямую в любом веб-проекте.

1. Выберите пресет или начните настраивать: выберите из 12 пресетов для распространённых типов бейджей — цвета статусов (success, warning, error, info), визуальные варианты (заливка, контур, мягкий, призрачный), размеры (от XS до XL) и специальные функции (точка-индикатор, кнопка закрытия, интерактивные hover-эффекты). Каждый пресет задаёт несколько свойств сразу для быстрой итерации.
2. Настройте каждую деталь: точно задайте текст бейджа, размер, вариант, форму (скруглённый, pill или квадратный), основной цвет и цвет текста. Включайте или отключайте опциональные функции, такие как точка-индикатор статуса, кнопка закрытия/удаления с hover-эффектом или интерактивные состояния при наведении и клике. Живой предпросмотр обновляется в реальном времени при любом изменении.
3. Скопируйте сгенерированный код: генератор бейджей выдаёт чистый, готовый к продакшену HTML и CSS. Копируйте HTML-сниппет, стили CSS или и то, и другое вместе. CSS включает правильную inline-flex-вёрстку, размер шрифта, отступы, border-radius и hover-состояния. Используйте собственное имя класса для интеграции с вашей существующей дизайн-системой.

• Заливка: сплошной фон с контрастным текстом. Визуально самый заметный вариант бейджа. Используйте для основных действий, индикаторов статуса и счётчиков уведомлений, где бейдж должен сразу выделяться на фоне окружающего контента.
• Контур: прозрачный фон с цветной рамкой. Цвет рамки совпадает с основным цветом, и текст использует тот же цвет. Идеально для второстепенной информации, где метка должна быть видна, но не конкурировать с основным контентом.
• Мягкий: фон со светлым оттенком и цветной текст. Использует основной цвет как светлый фон (указанный вами цвет применяется как фон) с более тёмным текстом. Идеально для тегов категорий, меток метаданных и бейджей токенов дизайн-систем, где бейдж должен быть виден, но не доминировать.
• Призрачный: без фона, только цветной текст. Визуально наименее заметный вариант. Используйте для строчных меток, второстепенных тегов в плотных интерфейсах и случаев, когда нужно указать категорию, не добавляя визуального веса.

При использовании бейджей в интерфейсе учитывайте следующие рекомендации по доступности: обеспечьте достаточный цветовой контраст между фоном бейджа и текстом (WCAG AA требует соотношения 4,5:1 для обычного текста); используйте мягкий вариант с осторожностью, так как светлый фон может не обеспечивать достаточный контраст на всех экранах; указывайте aria-labels для кнопок закрытия в помощь пользователям экранных дикторов (наш сгенерированный HTML включает aria-label="Remove"); не полагайтесь только на цвет для передачи смысла — сочетайте бейджи статуса с текстовыми метками для пользователей с нарушениями цветовосприятия; и убедитесь, что интерактивные бейджи имеют видимые индикаторы фокуса для навигации с клавиатуры.