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 whitespace-nowrap rounded-xl text-sm font-medium ring-offset-background transition-all duration-200 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
9  {
10    variants: {
11      variant: {
12        default: "surface-button text-foreground hover:text-primary",
13        destructive:
14          "surface-button text-destructive hover:text-destructive/80",
15        outline:
16          "surface-sm text-foreground hover:text-primary",
17        secondary:
18          "surface-button text-secondary-foreground bg-secondary hover:bg-secondary/90",
19        ghost: "hover:surface-sm hover:text-accent-foreground",
20        link: "text-primary underline-offset-4 hover:underline",
21        primary: "cta-primary",
22      },
23      size: {
24        default: "h-10 px-4 py-2",
25        sm: "h-9 rounded-lg px-3",
26        lg: "h-12 rounded-xl px-8",
27        icon: "h-10 w-10",
28        "icon-sm": "h-8 w-8 rounded-lg",
29        "icon-xs": "h-7 w-7 rounded-lg",
30      },
31    },
32    defaultVariants: {
33      variant: "default",
34      size: "default",
35    },
36  },
37)
38 
39export interface ButtonProps
40  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
41    VariantProps<typeof buttonVariants> {
42  asChild?: boolean
43}
44 
45const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
46  ({ className, variant, size, asChild = false, ...props }, ref) => {
47    const Comp = asChild ? Slot : "button"
48    return (
49      <Comp
50        className={cn(buttonVariants({ variant, size, className }))}
51        ref={ref}
52        {...props}
53      />
54    )
55  },
56)
57Button.displayName = "Button"
58 
59export { Button, buttonVariants }