38 lines
922 B
React
38 lines
922 B
React
|
import { Loader2 } from 'lucide-react';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Reusable Button component with built-in loading state
|
||
|
|
*
|
||
|
|
* @param {boolean} loading - Shows loading spinner when true
|
||
|
|
* @param {React.ReactNode} children - Button content when not loading
|
||
|
|
* @param {string} loadingText - Text to show when loading (default: "Loading...")
|
||
|
|
* @param {string} className - Additional CSS classes
|
||
|
|
* @param {object} ...props - All other button props (onClick, disabled, etc.)
|
||
|
|
*/
|
||
|
|
const LoadingButton = ({
|
||
|
|
loading = false,
|
||
|
|
children,
|
||
|
|
loadingText = 'Loading...',
|
||
|
|
className = '',
|
||
|
|
...props
|
||
|
|
}) => {
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
{...props}
|
||
|
|
disabled={loading || props.disabled}
|
||
|
|
className={className}
|
||
|
|
>
|
||
|
|
{loading ? (
|
||
|
|
<>
|
||
|
|
<Loader2 className="w-5 h-5 animate-spin inline mr-2" />
|
||
|
|
{loadingText}
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
children
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default LoadingButton;
|