Interaction

Buttons Builder Component

All buttons use pill border-radius (999px) and DM Sans Medium (500). Height: SM=34px, Default=44px, LG=54px. Active state scales to 97%. Focus shows Wasatch ring.

Variants Component

Use buildBtn() via .bsn-btn-mount for data-driven or programmatically generated buttons. Direct <button class="btn btn-*"> HTML is still fine for static prototypes.

Light surface variants

Dark surface variants — use btn-primary-dark on Alpine backgrounds

buildBtn() — declarative API

Rendered via buildBtn() — each is a .bsn-btn-mount with data-bsn-btn JSON

Sizes

Icon-only buttons (.btn-icon)

States

Light surface · .btn-primary (Alpine)

Dark surface · .btn-primary-dark (BSI Yellow — 9.33:1 on Alpine ✓)

CRO Button Component

Add .btn-cro to any button to switch from pill radius (--radius-pill 999px) to rounded-rect (--radius-input 8px). Used exclusively for conversion CTAs on Marketplace product cards and group cards — "Start free trial", "Purchase", "Request pack", "Renew", "Add to account". All variants, sizes, and states are identical to the standard button system.

Light surface variants + .btn-cro

Dark surface + .btn-cro

Spec: Radius = --radius-input (8px) · All other tokens, hover states, focus ring, active scale, and disabled opacity identical to .btn · Modifier only — always combine with a variant class (.btn-primary, .btn-outline, etc.) · Scope: Marketplace product cards and group cards only. Never use on platform UI buttons (nav, modals, toolbars, forms).

Button Tokens — Light surface: .btn-primary = --color-alpine bg + --color-salt text · Hover=#1a302c · Secondary/Outline=transparent + Alpine border · Dark surface: .btn-primary-dark = --color-bsi-yellow bg + --color-carbon text (9.33:1 on Alpine = AAA ✓) — only use on Alpine or dark backgrounds · Danger=--color-canyonlands bg · Radius=--radius-pill (standard) / --radius-input (CRO)