button

1import { Button as ButtonPrimitive } from "@base-ui/react/button"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5 
6const buttonVariants = cva(
7  cn(
8    "group/button font-head font-medium inline-flex cursor-pointer items-center justify-center gap-2 rounded whitespace-nowrap select-none transition-all duration-200",
9    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60",
10    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-invalid:border-destructive",
11    // Icons keep their own size; we only set a default when none is given so
12    // Neobrutalism's h-4/size-4 icons aren't overridden.
13    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
14  ),
15  {
16    variants: {
17      variant: {
18        default:
19          "border-2 border-black bg-primary text-primary-foreground shadow-md transition duration-200 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-primary-hover hover:shadow-lg active:translate-x-1 active:translate-y-1 active:shadow-none",
20        secondary:
21          "border-2 border-black bg-secondary text-secondary-foreground shadow-md transition duration-200 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-secondary-hover hover:shadow-lg active:translate-x-1 active:translate-y-1 active:shadow-none",
22        destructive:
23          "border-2 border-black bg-destructive text-destructive-foreground shadow-md transition duration-200 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-destructive/90 hover:shadow-lg active:translate-x-1 active:translate-y-1 active:shadow-none",
24        outline:
25          "border-2 bg-transparent shadow-md transition duration-200 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-lg active:translate-x-1 active:translate-y-1 active:shadow-none",
26        ghost: "bg-transparent hover:bg-accent",
27        link: "bg-transparent hover:underline",
28      },
29      size: {
30        default: "px-4 py-1.5 text-base",
31        xs: "px-2 py-0.5 text-xs",
32        sm: "px-3 py-1 text-sm",
33        lg: "px-6 py-2 text-base lg:px-8 lg:py-3 lg:text-lg",
34        icon: "p-2",
35        "icon-xs": "p-1",
36        "icon-sm": "p-1.5",
37        "icon-lg": "p-3",
38      },
39    },
40    defaultVariants: {
41      variant: "default",
42      size: "default",
43    },
44  }
45)
46 
47function Button({
48  className,
49  variant = "default",
50  size = "default",
51  ...props
52// … truncated