Button

1"use client";
2 
3import * as React from "react";
4import { Slot } from "@radix-ui/react-slot";
5import { cva, type VariantProps } from "class-variance-authority";
6 
7import { cn } from "@/lib/utils";
8 
9const buttonVariants = cva(
10  [
11    "inline-flex items-center justify-center gap-2 whitespace-nowrap select-none",
12    "font-medium tracking-tight",
13    "transition-[background,color,border,box-shadow] duration-150",
14    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
15    "disabled:pointer-events-none disabled:opacity-50",
16    "[&_svg]:size-4 [&_svg]:shrink-0",
17  ].join(" "),
18  {
19    variants: {
20      variant: {
21        primary:
22          "bg-primary text-primary-foreground border border-primary/60 hover:bg-primary/90 active:bg-primary/80",
23        secondary:
24          "bg-secondary text-secondary-foreground border border-border hover:border-border-strong hover:bg-secondary/80",
25        outline:
26          "bg-transparent text-foreground border border-border hover:bg-accent hover:border-border-strong",
27        ghost: "bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground",
28        danger:
29          "bg-danger text-danger-foreground border border-danger/60 hover:bg-danger/90 active:bg-danger/80",
30        tactical:
31          "bg-background-elevated text-foreground border border-border-strong text-mono uppercase tracking-[0.08em] hover:border-primary hover:text-primary",
32        link: "text-primary underline-offset-4 hover:underline",
33      },
34      size: {
35        sm: "h-7 px-2.5 text-xs rounded-sm",
36        md: "h-8 px-3 text-sm rounded-sm",
37        lg: "h-10 px-4 text-sm rounded-md",
38        icon: "h-8 w-8 rounded-sm",
39        "icon-sm": "h-7 w-7 rounded-sm",
40      },
41    },
42    defaultVariants: {
43      variant: "secondary",
44      size: "md",
45    },
46  },
47);
48 
49export interface ButtonProps
50  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
51  asChild?: boolean;
52}
53 
54const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
55  ({ className, variant, size, asChild = false, ...props }, ref) => {
56    const Comp = asChild ? Slot : "button";
57    return (
58      <Comp ref={ref} className={cn(buttonVariants({ variant, size }), className)} {...props} />
59    );
60  },
61);
62Button.displayName = "Button";
63 
64export { Button, buttonVariants };