Button Solid — Test Surface

This page exposes all BOMA-3 variants without app-level setup. Use the first section to trigger real hover/pressed transitions, then inspect the full 36 defined variant-state scenarios below.

Interactive transitions (all sizes × colors)

Hover and press each button to observe the 300ms hover animation and the 100ms pressed transition.

Defined state matrix (36 scenarios)

Every combination of size, color, and state from the design spec is rendered explicitly.

Undefined-state treatment proposal

Focus: visible ring via :focus-visible. Disabled: reduced opacity, no pointer interactions, no arrow reveal. Loading: non-interactive spinner + label treatment.