mirror of
https://github.com/documenso/documenso.git
synced 2025-11-11 21:12:48 +10:00
feat: add loading text prop
This commit is contained in:
@ -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>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user