01. Primary Cyan
bg-brutalist-cyan text-black border-2 border-brutalist-cyan hover:bg-black hover:text-brutalist-cyan active:translate-x-1 active:translate-y-1
02. Primary Pink
bg-brutalist-pink text-black border-2 border-brutalist-pink hover:bg-black hover:text-brutalist-pink
03. Primary Yellow
bg-brutalist-yellow text-black border-2 border-brutalist-yellow hover:bg-black hover:text-brutalist-yellow
04. Outline White
bg-black text-white border-2 border-white hover:bg-white hover:text-black
05. Shadow Cyan
shadow-[4px_4px_0px_0px_rgba(34,211,238,1)] hover:shadow-[8px_8px_0px_0px_rgba(34,211,238,1)] active:shadow-[2px_2px_0px_0px_rgba(34,211,238,1)]
06. Shadow Pink
shadow-[4px_4px_0px_0px_rgba(236,72,153,1)] hover:shadow-[8px_8px_0px_0px_rgba(236,72,153,1)]
07. Small
px-3 py-1 text-sm border (instead of border-2)
08. Large
px-8 py-4 text-lg border-2
09. Icon Left
flex items-center gap-2
10. Icon Right
flex items-center gap-2
11. Full Width
w-full
12. Disabled
disabled bg-zinc-800 text-zinc-600 border-zinc-700 cursor-not-allowed opacity-50
[ USAGE_NOTES ]
- > All buttons use `font-mono` and `font-bold`
- > Standard padding: `px-6 py-3`
- > Active state: `active:translate-x-1 active:translate-y-1`
- > Always use `transition-colors` or `transition-all`
- > Border width: `border-2` for emphasis, `border` for subtle
- > Hard shadows create brutalist aesthetic