'use client'; import * as React from 'react'; import { Button } from '@/components/ui/button'; import { cn } from '@/lib/utils'; import { motion } from 'motion/react'; type ColorVariant = 'emerald' | 'purple' | 'orange'; interface GradientButtonProps extends React.ButtonHTMLAttributes { icon?: React.ReactNode; label?: string; className?: string; variant?: ColorVariant; } const VARIANT_STYLES: Record< ColorVariant, { bg: string; border: string; text: string; pillBg: string; glow: string; hoverRing: string; } > = { emerald: { bg: 'bg-gradient-to-r from-emerald-500 via-emerald-400 to-emerald-500', border: 'border-emerald-300/70 dark:border-emerald-400/60', text: 'text-emerald-950 dark:text-emerald-50', pillBg: 'bg-emerald-100/80 dark:bg-emerald-900/70', glow: 'rgba(16, 185, 129, 0.45)', hoverRing: 'ring-emerald-300/60 dark:ring-emerald-400/60', }, purple: { bg: 'bg-gradient-to-r from-violet-500 via-purple-500 to-violet-600', border: 'border-purple-300/70 dark:border-purple-400/60', text: 'text-violet-950 dark:text-violet-50', pillBg: 'bg-violet-100/80 dark:bg-violet-900/70', glow: 'rgba(139, 92, 246, 0.45)', hoverRing: 'ring-purple-300/60 dark:ring-purple-400/60', }, orange: { bg: 'bg-gradient-to-r from-orange-500 via-amber-400 to-orange-500', border: 'border-orange-300/70 dark:border-orange-400/60', text: 'text-orange-950 dark:text-orange-50', pillBg: 'bg-orange-100/80 dark:bg-orange-900/70', glow: 'rgba(249, 115, 22, 0.45)', hoverRing: 'ring-orange-300/60 dark:ring-orange-400/60', }, }; const MotionButton = motion(Button as any); export default function GradientButton({ label = 'Welcome', icon, className, variant = 'orange', ...props }: GradientButtonProps) { const styles = VARIANT_STYLES[variant]; return ( {/* inner glass layer */} {/* hover gradient glow (no shimmer / no movement) */} {/* content */} {icon && ( {icon} )} {label} ); }

Gradient Button

Installation

Usage