UI Foundation
Кнопки
Bootstrap parity, семантические CTA, размеры, состояния и ограниченные motion-варианты для review.
Product roles
Семантические Baby in Brazil actions
Роль кнопки определяется пользовательским результатом. Цвет и animation являются следствием роли, а не самостоятельным решением.
Вторичные действия
Bootstrap parity
Bootstrap solid variants
Матрица строится на реальных классах Bootstrap 5.3.8; project namespace не переопределяет vendor geometry глобально.
Bootstrap parity
Bootstrap outline variants
Outline-состояния сохраняют семантику, focus-visible и предсказуемое disabled-поведение. Light демонстрируется на тёмном фоне, потому что на белой поверхности он намеренно почти невидим.
Light surfaces
Dark context
Outline light
Контраст проверяется в реальном окружении применения.
Sizing
Размеры и геометрия
Small, default, large, full-width, icon-only и составные кнопки.
Sizes
Icons
Block CTA
States
Полная матрица состояний
Состояния проверяются без необходимости угадывать hover мышью.
Optional motion
Анимированные кнопки — отдельный слой
Эти варианты показываются для принятия направления. Они не становятся default автоматически и применяются только к конкретным ролям.
Usage
Правила CTA и animation
Кнопка — обещание действия, а motion — подтверждение этого действия, не декоративная плашка.
✓
Один главный CTA на смысловой блок.
✓
Текст описывает результат: «Получить расчёт», а не «Нажать».
✓
Animation не меняет доступное имя и не сдвигает соседние элементы.
!
Coral и pulse используются только для настоящего urgent-сценария.
!
Не более одной signature-анимации в видимой композиционной зоне.
!
Reduced motion сохраняет полный feedback без движения.