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>(
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
({ className, variant, size, loading, disabled, asChild = false, children, ...props }, ref) => {
|
({ className, variant, size, loading, disabled, asChild = false, children, ...props }, ref) => {
|
||||||
const Comp = asChild ? Slot : 'button'
|
if (asChild) {
|
||||||
return (
|
return (
|
||||||
<Comp
|
<Slot
|
||||||
className={cn(buttonVariants({ variant, size, className }))}
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
disabled={asChild ? undefined : (disabled || loading)}
|
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{loading && !asChild && <Loader2 className="h-4 w-4 animate-spin" />}
|
|
||||||
{children}
|
{children}
|
||||||
</Comp>
|
</Slot>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
ref={ref}
|
||||||
|
disabled={disabled || loading}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{loading && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user