Next.js Discord

Discord Forum

Trying to create a custom variant of shadcn button for loading prop

Unanswered
Skipjack tuna posted this in #help-forum
Open in Discord
Skipjack tunaOP
const ButtonLoading = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, children, asChild = false, ...props }, ref) => {
    return (
      <Button
        disabled
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
      >
        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
        {children}
      </Button>
    );
  }
);

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (
    { className, variant, size, isLoading = false, asChild = false, ...props },
    ref
  ) => {
    // Extend shadcn component to allow for loading buttons by passing isLoading prop in. (works with custom theme)
    if (isLoading) {
      return (
        <ButtonLoading
          className={className}
          variant={variant}
          size={size}
          isLoading={isLoading}
          asChild={asChild}
        />
      );
    }

    const Comp = asChild ? Slot : "button";
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    );
  }
);

But the children doesnt seem to appear. Any reason why?

4 Replies

American
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className,circle, variant, children,loading, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, circle, className }))}
        ref={ref}
        {...props}
      >
        {
        loading?
            <React.Fragment>
                <Loader2 className='mr-2 h-4 w-4 animate-spin'/>
                <span>Please wait</span>
            </React.Fragment>
        :
            <React.Fragment>
              {children}
            </React.Fragment>
        }
      </Comp>
    )
  }
)


try this.
Just wondering how I would put the disabled property with this?
@Skipjack tuna Just wondering how I would put the disabled property with this?
American
it's already contain disabled props so u can just use it like a normal button, if u want to customize it just call it on button props, and dont forget to add it to <Comp disabled={disabled} >