fix(Button): asChild slot children error
- Separate render paths: asChild uses Slot directly, normal uses button - Fixes "Slot failed to slot onto its children" runtime error - Slot now always receives exactly one child (the Link element)
This commit is contained in:
@@ -47,17 +47,27 @@ export interface ButtonProps
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, loading, disabled, asChild = false, children, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : 'button'
|
||||
if (asChild) {
|
||||
return (
|
||||
<Slot
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Slot>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Comp
|
||||
<button
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
disabled={asChild ? undefined : (disabled || loading)}
|
||||
disabled={disabled || loading}
|
||||
{...props}
|
||||
>
|
||||
{loading && !asChild && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||
{loading && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||
{children}
|
||||
</Comp>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user