Neubrutalist Button Set

1export default function NeubrutalistButtons() {
2  const base = "inline-flex items-center justify-center rounded-none border-2 border-black font-bold text-sm px-6 py-3 transition-all duration-100 select-none";
3  const shadow = "shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[3px] active:translate-y-[3px]";
4  
5  return (
6    <div className="flex min-h-screen flex-col items-center justify-center gap-8 bg-[#fef3c7] p-8">
7      <h2 className="text-2xl font-black uppercase tracking-tight text-black">Neubrutalist Buttons</h2>
8      
9      <div className="flex flex-wrap items-center justify-center gap-4">
10        {/* Primary */}
11        <button className={`${base} ${shadow} bg-orange-400 text-black hover:bg-orange-500`}>
12          Primary Action
13        </button>
14        
15        {/* Secondary */}
16        <button className={`${base} ${shadow} bg-white text-black hover:bg-gray-100`}>
17          Secondary
18        </button>
19        
20        {/* Danger */}
21        <button className={`${base} ${shadow} bg-red-400 text-black hover:bg-red-500`}>
22          Danger Zone
23        </button>
24        
25        {/* Ghost */}
26        <button className="inline-flex items-center border-2 border-transparent px-6 py-3 text-sm font-bold text-black underline decoration-2 underline-offset-4 transition hover:decoration-orange-400">
27          Ghost Link
28        </button>
29      </div>
30      
31      {/* Size variants */}
32      <div className="flex flex-wrap items-end justify-center gap-4">
33        <button className={`${base} ${shadow} bg-violet-400 text-black text-xs px-4 py-2`}>Small</button>
34        <button className={`${base} ${shadow} bg-violet-400 text-black`}>Medium</button>
35        <button className={`${base} ${shadow} bg-violet-400 text-black text-lg px-8 py-4`}>Large</button>
36      </div>
37    </div>
38  );
39}