Демонстрация кастомных бейджей

Примеры использования бейджей с CSS переменными

Базовые бейджи

Основные цвета:
Primary Secondary Success Danger Warning Info Light Dark
Размеры:
Small Normal Large
С иконками:
Verified Warning Error
Формы:
Pill Borderless Transparent

Специальные бейджи

Уровни безопасности:
High Medium Low
Статусы:
Active Inactive Paused
Приоритеты:
Critical High Medium Low
Эффекты:
Glow effect Premium

Совместимость с существующими стилями

Status badges (из tables.css):
Success Warning Error
Outline варианты:
User Approved
Hover эффекты:
Hover me Hover me Hover

Примеры использования в интерфейсе

Пользователи:
Иван Иванов Active
Admin
Мария Петрова Away
Editor
Алексей Сидоров Blocked
User
Теги и категории:
CSS HTML JavaScript Python Bug Feature

Разные состояния

Активные и отключенные:
Active Disabled Enabled Disabled
С разным контентом:
1 99+ 5 12

На разных фонах

On dark On dark
On light On light

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

Особенности стилей:
  • Все цвета берутся из CSS переменных кнопок
  • Используются те же цвета, что и у .app-btn-*
  • Поддержка темной темы через [data-theme="dark"]
  • Плавные hover-эффекты (150ms ease)
  • Адаптивные размеры для мобильных
  • Совместимость с существующими .status-badge--*
Используемые переменные:
--app-btn-primary-color
--app-btn-success-color
--app-btn-danger-color
--app-btn-warning-color
--app-btn-info-color
--app-btn-secondary-color
Пример кода:
<span class="app-badge app-badge-primary">
    Primary
</span>

<span class="app-badge app-badge-success app-badge-with-icon">
    <i class="fas fa-check app-badge-icon"></i>
    Success
</span>

<span class="app-badge app-badge-danger app-badge-pill app-badge-glow">
    Critical
</span>
Продолжая использовать сайт, вы соглашаетесь на обработку файлов cookie и принимаете Пользовательское соглашение