Button

1import { Slot } from "@radix-ui/react-slot";
2import { cva, type VariantProps } from "class-variance-authority";
3import { type ButtonHTMLAttributes, forwardRef } from "react";
4import { cn } from "@/lib/utils";
5import { focusRing, glass, glassInteractive } from "@/lib/glass";
6 
7export const buttonVariants = cva(
8  `${glass} ${glassInteractive} ${focusRing} inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium rounded-full [&_svg]:shrink-0`,
9  {
10    variants: {
11      variant: {
12        default:
13          "bg-[#007AFF] hover:bg-[#007AFF]/90 text-white shadow-sm border-0",
14        outline:
15          "bg-none text-[#007AFF] border-[#007AFF]/55 shadow-none hover:bg-[#007AFF]/10 hover:border-[#007AFF]/70 hover:shadow-none dark:text-[#409cff] dark:border-[#409cff]/55 dark:hover:border-[#409cff]/70",
16        glass: "",
17        destructive: "!text-[#FF3B30]",
18      },
19      size: {
20        sm: "h-8 px-3 text-xs",
21        md: "h-10 px-4 text-base",
22        lg: "h-12 px-6 text-lg",
23        icon: "size-10 p-0",
24      },
25    },
26    defaultVariants: {
27      variant: "default",
28      size: "md",
29    },
30  },
31);
32 
33interface ButtonProps
34  extends ButtonHTMLAttributes<HTMLButtonElement>,
35    VariantProps<typeof buttonVariants> {
36  asChild?: boolean;
37}
38 
39export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
40  ({ className, variant, size, asChild = false, children, ...props }, ref) => {
41    const Comp = asChild ? Slot : "button";
42    return (
43      <Comp
44        ref={ref}
45        className={cn(buttonVariants({ variant, size }), className)}
46        {...props}
47      >
48        {children}
49      </Comp>
50    );
51  },
52);
53 
54Button.displayName = "Button";