Button Solid — BOMA-3

Standalone QA surface for all defined variants (2 sizes × 6 colors × 3 states), with interactive hover/press transitions.

Interactive transitions (default → hover → pressed)

Hover and press these live buttons to observe the 300ms hover entrance and 100ms press response.

large

small

Defined state matrix (36 scenarios)

large

ColorDefaultHoverPressed

green-a

blue-a

red-a

green-d

blue-d

red-d

small

ColorDefaultHoverPressed

green-a

blue-a

red-a

green-d

blue-d

red-d

Proposed additional states (outside Figma scope)

Focus: :focus-visible ring uses current text color with offset for keyboard navigation clarity.
Disabled: button interaction is blocked and opacity is reduced while preserving the base color identity.
Loading: loading prop sets aria-busy, disables interaction, and swaps the arrow for a spinner.