/ src / components / UI / shadcn / button.tsx
button.tsx
 1  import { cn } from "../../lib/util";
 2  import { Slot } from "@radix-ui/react-slot";
 3  import { cva, type VariantProps } from "class-variance-authority";
 4  import * as React from "react";
 5  
 6  const buttonVariants = cva(
 7    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 8    {
 9      variants: {
10        variant: {
11          default: "bg-primary text-primary-foreground hover:bg-primary/90",
12          destructive:
13            "bg-destructive text-destructive-foreground hover:bg-destructive/90",
14          outline:
15            "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
16          secondary:
17            "bg-secondary text-secondary-foreground hover:bg-secondary/80",
18          ghost: "hover:bg-accent hover:text-accent-foreground",
19          link: "text-primary underline-offset-4 hover:underline",
20        },
21        size: {
22          default: "h-10 px-4 py-2",
23          sm: "h-9 rounded-md px-3",
24          lg: "h-11 rounded-md px-8",
25          icon: "h-10 w-10",
26        },
27      },
28      defaultVariants: {
29        variant: "default",
30        size: "default",
31      },
32    }
33  );
34  
35  export interface ButtonProps
36    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
37      VariantProps<typeof buttonVariants> {
38    asChild?: boolean;
39  }
40  
41  const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
42    ({ className, variant, size, asChild = false, ...props }, ref) => {
43      const Comp = asChild ? Slot : "button";
44      return (
45        <Comp
46          className={cn(buttonVariants({ variant, size, className }))}
47          ref={ref}
48          {...props}
49        />
50      );
51    }
52  );
53  Button.displayName = "Button";
54  
55  export { Button, buttonVariants };