Design System v4 · Buttons

env: demo · UI Kit v0.3.6

Filled variants × states

defaulticon-leftdisabledloading
primary
secondary
secondary-stone
secondary-slate
success
warning
danger
info

Soft variants

Tinted backgrounds — для вторичных подсвеченных действий.

defaulticon-leftdisabledloading
soft
soft-secondary
soft-success
soft-warning
soft-danger
soft-info

Outline variants

defaulticon-leftdisabledloading
outline-primary
outline-secondary
outline-success
outline-danger
outline-info

Selected toggle — hover-to-cancel

Включённое состояние кнопки-переключателя (toggle button, aria-pressed). Наведение подменяет подпись на off-действие.

Ghost · Link

defaulticon-leftdisabledloading
ghost
ghost-borderless
link

Sizes × variants

7 размеров: xs / sm / md / lg / xl / 2xl / 3xl. Большие — для hero CTA.

xssmmdlgxl2xl3xl
primary
secondary
soft-secondary
outline-primary
ghost

Icon configurations × variants

noneicon-lefticon-rightbothicon-only
primary
secondary
soft
soft-secondary
outline-primary

As link (href) + round

href превращает кнопку в <a>

yc-btn-round — круглая icon-only

TelegramLoginButton — вход через Telegram

Общая кнопка входа/регистрации через Telegram для /login, /register и формы после гостевой игры. Ведёт на /auth/telegram/start; право боту писать (telegram:bot_access) всегда уходит в scope, а разрешение игрок даёт или снимает на экране согласия самого Telegram — отдельного чекбокса на форме нет. Кнопка outline и прозрачная по фону, чтобы одинаково читаться в светлой и тёмной теме: залитая фирменным синим перетягивала внимание с основной кнопки формы. На мобильном занимает всю ширину, на десктопе ужимается по содержимому.

ProgressButton

Универсальная кнопка с прогрессом. Опция game автоматически выбирает цвет игры.