Better hero buttons?

src/app/page.tsx

@@ -85,7 +85,7 @@ export default function Landing() {
                 </Button>
               </Link>
               <Link href="/leaderboards">
-                <Button variant="hero-outline">
+                <Button variant="hero">
                   <Trophy className="h-5 w-5" />
                   View Leaderboards
                 </Button>

src/components/ui/button.tsx

@@ -1,35 +1,36 @@
 import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
 
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default:
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-          "bg-primary text-primary-foreground hover:bg-primary/90 glow-purple hover:glow-purple-intense",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border-2 border-primary/50 bg-transparent text-primary hover:bg-primary/10 hover:border-primary",
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "text-muted-foreground hover:text-foreground hover:bg-secondary",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
-        hero: "bg-primary text-primary-foreground px-8 py-6 text-lg font-bold glow-purple hover:glow-purple-intense",
+        hero: "transition-colors duration-300 hover:text-primary text-glow",
-        "hero-outline":
-          "border-2 border-primary/50 bg-transparent text-primary px-8 py-6 text-lg font-bold hover:bg-primary/10 hover:border-primary hover:ring-2 hover:ring-primary/30",
       },
       size: {
-        default: "h-10 px-4 py-2",
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
         p2: "rounded-md p-2",
-        sm: "h-9 rounded-md px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        lg: "h-12 rounded-lg px-8",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        xl: "h-14 rounded-lg px-10 text-base",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "h-10 w-10",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {
@@ -39,25 +40,27 @@ const buttonVariants = cva(
   },
 );
 
-export interface ButtonProps
+function Button({
-  extends
+  className,
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
+  variant = "default",
-    VariantProps<typeof buttonVariants> {
+  size = "default",
-  asChild?: boolean;
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Button.displayName = "Button";
-
 export { Button, buttonVariants };