React TypeScript Component

1import React, { useState, useCallback } from 'react';
2 
3interface ButtonProps {
4  onClick: () => void;
5  children: React.ReactNode;
6  variant?: 'primary' | 'secondary';
7  disabled?: boolean;
8}
9 
10const Button: React.FC<ButtonProps> = ({
11  onClick,
12  children,
13  variant = 'primary',
14  disabled = false
15}) => {
16  const [isLoading, setIsLoading] = useState(false);
17 
18  const handleClick = useCallback(async () => {
19    setIsLoading(true);
20    try {
21      await onClick();
22    } finally {
23      setIsLoading(false);
24    }
25  }, [onClick]);
26 
27  return (
28    <button
29      onClick={handleClick}
30      disabled={disabled || isLoading}
31      className={`btn btn-${variant}`}
32    >
33      {isLoading ? 'Loading...' : children}
34    </button>
35  );
36};
37 
38export default Button;