CoreButton
Примеры использования и документация.
Главное действие интерфейса — то, к чему ведёт взгляд пользователя: CoreButton сразу показывает, куда нажимать, и отвечает на каждый жест — наведение подсвечивает, нажатие мягко «вжимает», фокус рисует видимое кольцо. Состояние loading честно сообщает, что запрос в полёте, и не даёт отправить его дважды. Одна кнопка закрывает все сценарии — от отправки формы до круглой иконки закрытия.
Вариант подбирается по весу действия: solid — главный призыв экрана (один на вид), soft — второстепенные действия, outline — заметность без заливки, ghost — лёгкие действия в панелях и тулбарах, link — действие внутри текста, icon — компактная иконка-действие (закрыть, «далее», избранное; вместе с round — идеальный круг). Семь семантических цветов и три размера (sm/md/lg) настраивают плотность интерфейса: от компактных тулбаров до hero-секций; block растягивает кнопку на всю ширину родителя.
Состояния не ломают композицию: при loading спиннер сменяет контент, но размеры кнопки не меняются — контент становится прозрачным и сохраняет место; disabled глушит события и приглушает вид; при нажатии кнопка едва заметно «вжимается». Всё это работает без единой строчки кода потребителя.
Проп to превращает кнопку в ссылку, не меняя её облик: внутренний маршрут или внешний URL рендерятся через CoreLink, а при disabled/loading активация честно блокируется (aria-disabled + гард клика) — пользователь видит недоступную кнопку-ссылку, а не «мёртвую» ссылку.
Фирменный перелив — то, что делает интерфейс живым: flowBorder зажигает градиентную рамку, flowBg заливает фон и рамку единым градиентом (цвет текста выбирается автоматически контрастным). Пара цветов настраивается на месте — переменными --btn-flow-a/-b, полная замена картинки градиента — --btn-flow-image. Такт движения — 9 секунд; при prefers-reduced-motion градиент остаётся статичным (SC 2.2.2).
Темизация без форка: цвет пробрасывается переменными --ui-btn/--ui-btn-fg (neutral — инверсия темы fg/bg), поэтому все hover/focus/active-состояния автоматически работают с любым токеном темы. Доступность из коробки: hover — только на устройствах с курсором (после тапа состояние не «залипает»), кольцо фокуса — по :focus-visible, при загрузке — aria-busy.