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  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
8  {
9    variants: {
10      variant: {
11        default: "bg-primary text-primary-foreground hover:bg-primary/90",
12        destructive:
13          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
14        outline:
15          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
16        secondary:
17          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
18        ghost:
19          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
20        link: "text-primary underline-offset-4 hover:underline"
21      },
22      size: {
23        default: "h-9 px-4 py-2 has-[>svg]:px-3",
24        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
25        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
26        icon: "size-9",
27        "icon-sm": "size-8",
28        "icon-lg": "size-10"
29      }
30    },
31    defaultVariants: {
32      variant: "default",
33      size: "default"
34    }
35  }
36);
37 
38const buttonHoverPop =
39  "hover:shadow-md focus-visible:shadow-md active:shadow-inner active:scale-[0.98] motion-safe:hover:-translate-y-0.5 motion-safe:focus-visible:-translate-y-0.5 motion-safe:active:translate-y-px";
40 
41function ButtonArrow({ className }: { className?: string }) {
42  return (
43    <svg
44      aria-hidden="true"
45      data-slot="button-arrow"
46      fill="none"
47      width="10"
48      height="10"
49      viewBox="0 0 10 10"
50      className={cn(
51        "ml-2 -mr-1 size-2.5 overflow-visible stroke-current stroke-2",
52        className
53      )}
54    >
55      <path
56        className="opacity-0 transition-opacity group-hover/button:opacity-100 group-focus-visible/button:opacity-100"
57        d="M0 5h7"
58      />
59      <path
60// … truncated