feat: add loading text prop

This commit is contained in:
nafees nazik
2023-11-30 15:20:06 +05:30
parent 0b2dce2238
commit 231a307b89

View File

@ -53,18 +53,23 @@ export interface ButtonProps
* Will display the loading spinner and disable the button. * Will display the loading spinner and disable the button.
*/ */
loading?: boolean; loading?: boolean;
/**
* The label to show in the button when `isLoading` is true
*/
loadingText?: string;
} }
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, loading, ...props }, ref) => { ({ className, variant, size, asChild = false, loadingText, loading, ...props }, ref) => {
if (asChild) { if (asChild) {
return ( return (
<Slot className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} /> <Slot className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
); );
} }
const showLoader = loading === true; const isLoading = loading === true;
const isDisabled = props.disabled || showLoader; const isDisabled = props.disabled || isLoading;
return ( return (
<button <button
@ -73,8 +78,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{...props} {...props}
disabled={isDisabled} disabled={isDisabled}
> >
{showLoader && <Loader className={cn('mr-2 animate-spin', loaderVariants({ size }))} />} {isLoading && <Loader className={cn('mr-2 animate-spin', loaderVariants({ size }))} />}
{props.children} {isLoading && loadingText ? loadingText : props.children}
</button> </button>
); );
}, },