1import { createLink, type LinkComponent } from "@tanstack/react-router";
 2import type { VariantProps } from "class-variance-authority";
 3import * as React from "react";
 4
 5import { cn } from "@/lib/utils";
 6
 7import { buttonVariants } from "./button";
 8
 9// A proper TanStack Router link that looks like a Button.
10// Replaces the `<Button asChild><Link …/></Button>` pattern,
11// giving us preloading, typed routes, and active link support.
12interface ButtonLinkProps extends VariantProps<typeof buttonVariants> {
13  className?: string;
14  children?: React.ReactNode;
15}
16
17const ButtonLinkComponent = React.forwardRef<
18  HTMLAnchorElement,
19  ButtonLinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
20>(({ className, variant, size, children, ...props }, ref) => {
21  return (
22    <a ref={ref} className={cn(buttonVariants({ variant, size, className }))} {...props}>
23      {children}
24    </a>
25  );
26});
27ButtonLinkComponent.displayName = "ButtonLinkComponent";
28
29const CreatedButtonLink = createLink(ButtonLinkComponent);
30
31export const ButtonLink: LinkComponent<typeof ButtonLinkComponent> = (props) => {
32  return <CreatedButtonLink preload="intent" {...props} />;
33};