Button tokens from tokens4_website-UZ.json (mapped/light and mapped/dark → css/tokens.css).
Primary and tonal use solid surfaces for hover and pressed; secondary uses a 10% / 20% foreground tint on the fill (same layered intent as Figma “state layer”).
Neutral rows (product-item, list-item, booking-row) use a ::before state overlay on a stable container (--uz-surface-bg); optional utility class uz-interactive-surface.
Primary
Default · hover pointer · pressed (click or keyboard) · static pressed class for docs
Secondary
Transparent container, border + label at full opacity; hover / pressed tint on fill only
Filled tonal
Low-emphasis filled control (surface tint + contrasting label)
Toggled state
Every button except primary can be a toggle. On = the primary appearance. Set aria-pressed="true" (or .uz-btn--toggled). Click to try.
Primary has no toggled state — it is already the strongest appearance.
Shell modal (legacy class)
.btn-primary — legacy alias for Regular primary (.uz-btn--md); full width in demos
Payment flow modals use uz-btn uz-btn--primary uz-btn--md uz-btn--block (Figma Regular). Sizes: uz-btn--sm / --md / --lg.