rainbow-button

1import { motion } from "motion/react";
2import * as React from "react";
3import { cn } from "@/lib/utils";
4 
5interface RainbowButtonProps
6  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
7  children: React.ReactNode;
8  colors?: string[];
9  duration?: number;
10  borderWidth?: number;
11  animated?: boolean;
12}
13 
14const RainbowButton = React.forwardRef<HTMLButtonElement, RainbowButtonProps>(
15  (
16    {
17      children,
18      colors = ["#f43f5e", "#8b5cf6", "#3b82f6", "#22c55e", "#f43f5e"],
19      duration = 2,
20      borderWidth = 2,
21      animated = true,
22      className,
23      onClick,
24      disabled,
25      type = "button",
26      ...props
27    },
28    ref,
29  ) => {
30    const gradientColors = colors.join(", ");
31 
32    return (
33      <button
34        ref={ref}
35        type={type}
36        onClick={onClick}
37        disabled={disabled}
38        className={cn(
39          "relative inline-flex items-center justify-center overflow-hidden rounded-lg font-medium transition-transform hover:scale-105 active:scale-95 disabled:pointer-events-none disabled:opacity-50",
40          className,
41        )}
42        style={{ padding: borderWidth }}
43        {...props}
44      >
45        {/* Animated gradient background */}
46        <motion.div
47          className="absolute inset-0"
48          style={{
49            background: `linear-gradient(var(--gradient-angle, 0deg), ${gradientColors})`,
50          }}
51          animate={
52            animated
53              ? {
54                  "--gradient-angle": ["0deg", "360deg"],
55                }
56              : undefined
57          }
58          transition={
59            animated
60              ? {
61                  duration,
62                  repeat: Infinity,
63                  ease: "linear",
64                }
65              : undefined
66          }
67        />
68        {/* Button content */}
69        <span
70          className="relative z-10 flex items-center gap-2 rounded-md bg-background px-6 py-2.5 font-medium text-sm transition-colors hover:bg-background/90"
71          style={{
72            borderRadius: `calc(0.5rem - ${borderWidth}px)`,
73          }}
74        >
75          {children}
76        </span>
77      </button>
78    );
79  },
80);
81RainbowButton.displayName = "RainbowButton";
82 
83export { RainbowButton };