I want to create a button component that can be used as a button or a (NextJS) link. I think its close to working, but the element Tag is complaining about the passed props as if it doesnt know wich Tag is passed and wich props to use. What am I doing wrong?
import Link, { type LinkProps } from "next/link";
type Props<T extends boolean> = {
link: T;
} & (T extends true
? LinkProps
: React.ButtonHTMLAttributes<HTMLButtonElement>);
const Button = <T extends boolean>({
link,
children,
...props
}: React.PropsWithChildren<Props<T>>) => {
const Tag = link ? Link : "button";
return (
<Tag {...props}>
{children}
</Tag>
);
};
export default Button;