My aim was to dynamically utilize either HTML <button>
or <Link>
from Qwik library based on the presence of the href
prop. However, it seems that the link is not functioning as expected and clicking on it doesn't produce any result.
import { Slot, component$ } from "@builder.io/qwik";
import { Link } from "@builder.io/qwik-city";
interface ButtonProps {
href?: string;
}
export const Button = component$<ButtonProps>(({ href }) => {
const Component = href ? Link : "button";
return (
<Component class="cursor-pointer select-none bg-blue-600 px-4 py-2 text-white">
<Slot />
</Component>
);
});