Design System v4 · Buttons

env: prod

Filled variants × states

default icon-left disabled loading
primary
secondary
secondary-stone
secondary-slate
success
warning
danger
info

Soft variants

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

default icon-left disabled loading
soft
soft-secondary
soft-success
soft-warning
soft-danger
soft-info

Outline variants

default icon-left disabled loading
outline-primary
outline-secondary
outline-success
outline-danger
outline-info

Selected toggle — hover-to-cancel

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

Ghost · Link

default icon-left disabled loading
ghost
ghost-borderless
link

Sizes × variants

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

xs sm md lg xl 2xl 3xl
primary
secondary
soft-secondary
outline
ghost

Icon configurations × variants

none icon-left icon-right both icon-only
primary
secondary
soft
soft-secondary
outline-primary

As link (href) + round

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

Профиль Docs Скачать

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

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

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

ProgressButton

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

Смотреть · Нарды Смотреть · Дурак Смотреть · Тысяча Смотреть · Преферанс