[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

• [X] I've made research efforts and searched the documentation
• [X] 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.

[kimhout-sam]

i think that not on button but on your svg

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)

something like

{/** upper */}
  <Button>
    <span>
      <svg>
        <use {...some_props} xlink:href />
                             ^^^^^^^^^^ <------here change to `xlinkHref`
      </svg>
    </span>
  </Button>
{/** lower */}

[recursivezero]

This is because of using mdi icons in shadcn Button like this

import { Icon } from "astro-icon/components";
import { Button } from "@/components/ui/button";

 <mobile-button>
    <Button
      id="toggle-navigation-menu"
      className="group relative mr-2 ms-4 h-7 w-7 sm:hidden"
      type="button"
      aria-label="Open main menu"
      aria-expanded="false"
      aria-haspopup="menu"
    >
      <span class="text-2xl font-bold text-white group-aria-expanded:hidden dark:text-black">
        <Icon name="mdi:menu" />
      </span>
      <span class="hidden text-2xl font-bold text-white group-aria-expanded:block dark:text-black">
        <Icon name="mdi:close" />
      </span>
    </Button>
  </mobile-button>

these <Icon name="mdi:menu" /> and <Icon name="mdi:close" /> is causing this issue.

[shadcn]

This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)

[shadcn]

This issue has been automatically closed due to one year of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding! (This is an automated message)