Button Kits

Hover each button to compare. Pick the one closest to the current design, copy that file's contents into components/ui/ButtonLink.js, retheme the colors, then delete this folder and this preview page.

Kit 1 — No Arrow

Background/text color swap on hover. No arrow. (Current starter default.)

Kit 2 — Swap-Side Arrow

Right arrow shows by default; on hover it swaps to a left arrow sliding in from the other side.

Kit 3 — Growing-Line Arrow

Arrowhead stays put, the line behind it stretches on hover. Label goes italic.

Kit 4 — Spread / Tertiary Layout

Full-width, bordered, label and arrow pushed to opposite ends. For standalone CTA banners, not inline links.

design system