[bug]: Invalid DOM property xlink:href. Did you mean xlinkHref?

[xkeshav]

Describe the bug

Using shadcn with astro and create button component as per your documentations. below is the generate code

import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";

import { cn } from "@/libs";

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-zinc-300",
  {
    variants: {
      variant: {
        default:
          "bg-zinc-900 text-zinc-50 shadow hover:bg-zinc-900/90 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90",
        destructive:
          "bg-red-500 text-zinc-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
        outline:
          "border border-zinc-200 bg-white shadow-sm hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
        secondary:
          "bg-zinc-100 text-zinc-900 shadow-sm hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80",
        ghost: "hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
        link: "text-zinc-900 underline-offset-4 hover:underline dark:text-zinc-50"
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9"
      }
    },
    defaultVariants: {
      variant: "default",
      size: "default"
    }
  }
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> { 
  asChild?: boolean;
}

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 };

although it runs okay and button appears but in terminal it gives warning as below

Warning: Invalid DOM property `xlink:href`. Did you mean `xlinkHref`?
    at use
    at svg
    at span
    at button
    at eval (/home/project/location//src/components/ui/button.tsx:39:6)

and line # 39 is VariantProps<typeof buttonVariants> {

unable to understand where is this line and why it is throwing warning?
below is package.json

"dependencies": {
    "@astrojs/check": "0.9.3",
    "@astrojs/netlify": "6.0.0-beta.0",
    "@astrojs/node": "9.0.0-beta.2",
    "@astrojs/react": "3.6.2",
    "@astrojs/tailwind": "5.1.1",
    "@headlessui/react": "1.7.18",
    "@heroicons/react": "2.1.1",
    "@hookform/resolvers": "3.3.4",
    "@iconify-json/mdi": "1.1.66",
   "@radix-ui/react-alert-dialog": "1.0.5",
    "@radix-ui/react-aspect-ratio": "1.0.3",
    "@radix-ui/react-checkbox": "1.0.4",
    "@radix-ui/react-dialog": "1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-icons": "1.3.0",
    "@radix-ui/react-label": "2.0.2",
    "@radix-ui/react-popover": "^1.1.1",
    "@radix-ui/react-radio-group": "1.1.3",
    "@radix-ui/react-select": "2.0.0",
    "@radix-ui/react-slot": "1.0.2",
    "@radix-ui/react-toast": "^1.2.1",
    "@react-hook/media-query": "1.1.1",
    "astro": "5.0.0-beta.1",
    "astro-i18next": "1.0.0-beta.21",
    "astro-icon": "^1.1.1",
    "axios": "^1.7.5",
    "class-variance-authority": "0.7.0",
    "clsx": "2.1.0",
    "cmdk": "1.0.0",
    "embla-carousel-react": "8.1.3",
    "file-type": "19.0.0",
    "i18next": "^23.10.1",
    "jwt-decode": "^4.0.0",
    "lucide-react": "0.396.0",
    "mongoose": "^8.6.3",
    "nanostores": "0.10.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-drag-drop-files": "2.3.10",
    "react-hook-form": "^7.50.0",
    "react-hot-toast": "2.4.1",
    "react-i18next": "14.1.0",
    "react-icon": "1.0.0",
    "react-icons": "5.0.1",
    "react-share": "5.1.0",
    "shadcn": "^2.0.7",
    "tailwind-merge": "2.2.0",
    "tailwindcss": "3.4.0",
    "tailwindcss-animate": "1.0.7",
    "typescript": "5.3.3",
}

Affected component/components

Button

How to reproduce

1. install shadcn in Astro component
2. generate button component
3. now when run the project npm run dev

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

> Ubuntu 24.04

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[MeerUzairWasHere]

Tried to recreate this bug, It's working fine for me. no warnings in logs

[xkeshav]

is there any chance that in some place where we use <Button> and using wrong value for variant property can cause this issue?

[MeerUzairWasHere]

is there any chance that in some place where we use <Button> and using wrong value for variant property can cause this issue?

maybe, haven't tried it. actually, I don't use Astro.