LoadingButton fails when using asChild

[lok225]

When implementing the LoadingButton with the asChild prop, you get the following error. I guess the current implementation negates the Slot implementation when using asChild:

const LoadingButton = React.forwardRef<HTMLButtonElement, ButtonProps>( ({ className, variant, size, asChild = false, loading, children, ...props }, ref) => { const Comp = asChild ? Slot : 'button'; return ( <Comp className={cn(buttonVariants({ variant, size, className }))} disabled={loading} ref={ref} {...props}

{loading && <Loader2 className={cn('h-4 w-4 animate-spin', children && 'mr-2')} />} {children} ); }, ); LoadingButton.displayName = 'LoadingButton';

[hsuanyi-chou]

It's fixed. Missing fragment.

Thanks!

Following is a snippet so that you don't have to copy it again.

      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        disabled={loading}
        ref={ref}
        {...props}
      >
+        <>
          {loading && <Loader2 className={cn('h-4 w-4 animate-spin', children && 'mr-2')} />}
          {children}
+        </>
      </Comp>

[Yhprum]

Adding this fragment breaks styles when actually using asChild with NextJS Link for me.

<Button variant="outline" asChild className="ml-auto gap-1">
  <Link href="/">
    <Plus />
    New
  </Link>
</Button>

the button does not have outline styles nor classname styles

[hsuanyi-chou]

@Yhprum fix it. please copy the loading-button.tsx again.

demo

[Yhprum]

thanks you! works great