Button

1import * as React from 'react';
2import { Slot } from '@radix-ui/react-slot';
3import { cva, type VariantProps } from 'class-variance-authority';
4 
5import { cn } from '@/lib/utils';
6 
7const buttonVariants = cva(
8  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
9  {
10    variants: {
11      variant: {
12        default:
13          'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
14        destructive:
15          'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',
16        outline:
17          'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
18        secondary:
19          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
20        ghost: 'hover:bg-accent hover:text-accent-foreground',
21        link: 'text-primary underline-offset-4 hover:underline',
22        success: 'bg-green-600 text-white hover:bg-green-700',
23        warning: 'bg-yellow-500 text-black hover:bg-yellow-600',
24        info: 'bg-blue-500 text-white hover:bg-blue-600',
25        dark: 'bg-gray-800 text-white hover:bg-gray-700',
26        light: 'bg-gray-100 text-gray-800 hover:bg-gray-200',
27        gradient:
28          'bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500 text-white hover:opacity-90',
29        glass:
30          'bg-white/10 backdrop-blur-md text-white border border-white/20 hover:bg-white/20',
31      },
32      size: {
33        default: 'h-9 px-4 py-2',
34        sm: 'h-8 rounded-md px-3 text-xs',
35        lg: 'h-10 rounded-md px-8',
36        icon: 'h-9 w-9',
37      },
38    },
39    defaultVariants: {
40      variant: 'default',
41      size: 'default',
42    },
43  },
44);
45 
46export interface ButtonProps
47  extends
48    React.ButtonHTMLAttributes<HTMLButtonElement>,
49    VariantProps<typeof buttonVariants> {
50  asChild?: boolean;
51}
52 
53const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
54  ({ className, variant, size, asChild = false, ...props }, ref) => {
55    const Comp = asChild ? Slot : 'button';
56    return (
57      <Comp
58        className={cn(buttonVariants({ variant, size, className }))}
59        ref={ref}
60        {...props}
61      />
62    );
63  },
64);
65Button.displayName = 'Button';
66 
67export { Button, buttonVariants };