Corp/backend/static/scss/components/BUTTONS_README.md

Документация: Компонент Buttons

Обзор

Расширенная система кнопок, дополняющая стандартные кнопки Bootstrap дополнительными вариантами и утилитами.

Классы кнопок

1. Круглые кнопки (.btn-circle)

Идеально круглые кнопки для иконок. Автоматически становятся квадратными с border-radius: 50%.

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

<button class="btn btn-primary btn-circle">
  <i class="bi-plus"></i>
</button>

<button class="btn btn-outline-secondary btn-circle">
  <i class="bi-funnel"></i>
</button>

Размеры

<!-- Маленькая: 32x32px -->
<button class="btn btn-primary btn-circle btn-sm">
  <i class="bi-heart"></i>
</button>

<!-- Средняя (по умолчанию): 36x36px -->
<button class="btn btn-primary btn-circle">
  <i class="bi-star"></i>
</button>

<!-- Большая: 44x44px -->
<button class="btn btn-primary btn-circle btn-lg">
  <i class="bi-search"></i>
</button>

Или используйте специальные классы:

<button class="btn btn-primary btn-circle-sm">...</button>
<button class="btn btn-primary btn-circle-md">...</button>
<button class="btn btn-primary btn-circle-lg">...</button>

Состояния

Toggle-кнопки автоматически вращаются при раскрытии:

<button class="btn btn-outline-secondary btn-circle" 
        data-bs-toggle="collapse" 
        data-bs-target="#filters"
        aria-expanded="false">
  <i class="bi-funnel"></i>
</button>
<!-- При aria-expanded="true" кнопка повернется на 180° -->

2. Кнопки с иконками (.btn-icon)

Кнопки с иконкой и текстом. На мобильных устройствах текст скрывается.

<button class="btn btn-primary btn-icon">
  <i class="bi-plus-lg"></i>
  <span class="btn-text">Создать</span>
</button>

<a href="/create" class="btn btn-success btn-icon">
  <i class="bi-file-plus"></i>
  <span class="btn-text">Новый документ</span>
</a>

Поведение:

• Десктоп: иконка + текст
• Мобильные (< 768px): только иконка (круглая кнопка)

3. Кнопки-призраки (.btn-ghost)

Прозрачные кнопки без фона, появляется фон при наведении.

<button class="btn btn-ghost">
  <i class="bi-pencil"></i>
  Редактировать
</button>

<button class="btn btn-ghost btn-circle">
  <i class="bi-three-dots"></i>
</button>

4. Pill-кнопки (.btn-pill)

Максимально скругленные кнопки (border-radius: 999px).

<button class="btn btn-primary btn-pill">
  Подписаться
</button>

<a href="/more" class="btn btn-outline-secondary btn-pill">
  Узнать больше
</a>

Группы кнопок

Группа круглых кнопок

<div class="btn-circle-group">
  <button class="btn btn-outline-secondary btn-circle">
    <i class="bi-funnel"></i>
  </button>
  <button class="btn btn-outline-secondary btn-circle">
    <i class="bi-sort-down"></i>
  </button>
  <button class="btn btn-primary btn-circle">
    <i class="bi-plus"></i>
  </button>
</div>

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

Пример 1: Шапка страницы с фильтрами

<div class="d-flex align-items-center gap-2">
  <h1>Сотрудники</h1>
  
  <div class="ms-auto d-flex gap-2">
    <!-- Поиск -->
    <input type="search" class="form-control" placeholder="Поиск...">
    
    <!-- Кнопка фильтров -->
    <button class="btn btn-outline-secondary btn-circle" 
            data-bs-toggle="collapse" 
            data-bs-target="#filters">
      <i class="bi-funnel"></i>
    </button>
    
    <!-- Кнопка создания -->
    <button class="btn btn-primary btn-icon">
      <i class="bi-plus-lg"></i>
      <span class="btn-text">Создать</span>
    </button>
  </div>
</div>

Пример 2: Карточка с действиями

<div class="card">
  <div class="card-body">
    <h5>Название документа</h5>
    <p>Описание...</p>
    
    <div class="btn-circle-group">
      <button class="btn btn-ghost btn-circle" title="Редактировать">
        <i class="bi-pencil"></i>
      </button>
      <button class="btn btn-ghost btn-circle" title="Поделиться">
        <i class="bi-share"></i>
      </button>
      <button class="btn btn-ghost btn-circle" title="Удалить">
        <i class="bi-trash"></i>
      </button>
    </div>
  </div>
</div>

Пример 3: Навигация с разными размерами

<div class="d-flex align-items-center gap-3">
  <!-- Маленькие кнопки для вспомогательных действий -->
  <button class="btn btn-outline-secondary btn-circle btn-sm">
    <i class="bi-arrow-left"></i>
  </button>
  
  <!-- Обычная кнопка для основного действия -->
  <button class="btn btn-primary btn-pill">
    Далее
  </button>
  
  <!-- Маленькая кнопка справа -->
  <button class="btn btn-outline-secondary btn-circle btn-sm">
    <i class="bi-arrow-right"></i>
  </button>
</div>

Комбинирование с Bootstrap

Все новые классы полностью совместимы со стандартными классами Bootstrap:

<!-- Цвета Bootstrap -->
<button class="btn btn-primary btn-circle">...</button>
<button class="btn btn-success btn-circle">...</button>
<button class="btn btn-danger btn-circle">...</button>
<button class="btn btn-outline-secondary btn-circle">...</button>

<!-- Размеры Bootstrap + круглые кнопки -->
<button class="btn btn-primary btn-circle btn-sm">...</button>
<button class="btn btn-primary btn-circle btn-lg">...</button>

<!-- Состояния Bootstrap -->
<button class="btn btn-primary btn-circle" disabled>...</button>
<button class="btn btn-outline-secondary btn-circle active">...</button>

Миграция со старого кода

Было (специфичные стили):

<button class="btn btn-outline-secondary page-filter-toggle">
  <i class="bi-funnel"></i>
</button>

.page-filter-toggle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  /* ... еще 20 строк CSS ... */
}

Стало (универсальный класс):

<button class="btn btn-outline-secondary btn-circle">
  <i class="bi-funnel"></i>
</button>

/* Никаких дополнительных стилей не нужно! */

CSS переменные

Компонент использует стандартные переменные Bootstrap:

• --bs-primary - основной цвет
• --bs-body-color - цвет текста
• --bs-border-color - цвет границ
• --bs-border-radius - скругление углов

Поддержка темной темы

Все кнопки автоматически адаптируются под темную тему через prefers-color-scheme: dark.

Доступность

• Все кнопки имеют правильные aria-label атрибуты
• Иконки используют line-height: 1 для правильного центрирования
• Фокус-стейты наследуются от Bootstrap
• Поддержка клавиатурной навигации

Производительность

• Минимальное использование !important (только где абсолютно необходимо)
• CSS переменные для легкой кастомизации
• Оптимизированные селекторы
• Не влияет на другие компоненты