A detail when pasting the button component

[ivanosquis10]

First of all your idea is very cool and I love it. The situation is that when I paste the button component that you provide, I save and I get the following error, I have a project with a long and good development, I liked the idea and I wanted to implement some details in the buttons but I get this error...I will try to fix the error but I leave it here in case someone else has the same problem.

Updated: I think the problem is related to the prop "aschild".

[jakobhoeg]

Thank you for providing this information! I'll definitely look into it.

[thedevdavid]

It's because the Slot component from Radix can only accept 1 child component and now it may have more than that.

enhanced-button/src/components/ui/button.tsx

Lines 83 to 102 in 5e3be1f

	const Comp = asChild ? Slot : "button";
	return (
	<Comp
	className={cn(buttonVariants({ variant, size, className }))}
	ref={ref}
	{...props}
	>
	{Icon && iconPlacement === "left" && (
	<div className="w-0 translate-x-[0%] pr-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:translate-x-100 group-hover:pr-2 group-hover:opacity-100">
	<Icon />
	</div>
	)}
	{props.children}
	{Icon && iconPlacement === "right" && (
	<div className="w-0 translate-x-[100%] pl-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:translate-x-0 group-hover:pl-2 group-hover:opacity-100">
	<Icon />
	</div>
	)}
	</Comp>
	);

If you wrap everything inside <Comp> into a <React.Fragment>, it'll work. I've opened a PR #4

[thedevdavid]

@jakobhoeg one thing to mention I just realized after making the PR: asChild prop does not work with Fragment.

So if the child is a <Link> from next.js for example, this won't work.

And it looks like an issue with Radix. radix-ui/primitives#1825

So probably better to reorganize the Button component.