saas_app/src/shared/components/loadingButton/LoadingButton.tsx

29 lines
847 B
TypeScript

'use client';
import { forwardRef } from 'react';
import { Button } from '@/components/ui/button';
import { Loader2 } from 'lucide-react';
import clsx from 'clsx';
import LoadingButtonProps from './LoadingButtonInterface';
const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(
({ text, textLoading, loading = false, className, disabled, ...props }, ref) => {
return (
<Button
ref={ref}
disabled={loading || disabled}
aria-busy={loading}
aria-live="polite"
className={clsx('cursor-pointer', className)}
{...props}
>
{loading && <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />}
<span>{loading ? textLoading : text}</span>
</Button>
);
},
);
LoadingButton.displayName = 'LoadingButton';
export default LoadingButton;