-
Notifications
You must be signed in to change notification settings - Fork 1
/
button.tsx
41 lines (34 loc) · 1.34 KB
/
button.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import classNames from 'classnames';
import { ButtonHTMLAttributes, DetailedHTMLProps, PropsWithChildren, forwardRef } from 'react';
import SpinnerIcon from '../icons/spinner';
import { ColorVariants } from '../typings/components';
const colors: Record<ColorVariants, string> = {
primary: 'text-white bg-gray-900 hover:bg-gray-600',
red: 'text-white bg-red-900 hover:bg-red-600',
'white-gray': 'text-gray-900 bg-gray-100 hover:bg-gray-200',
};
type ButtonProps = PropsWithChildren<
{
color?: ColorVariants;
isLoading?: boolean;
} & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
>;
const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: ButtonProps, ref) => {
const { children, className, color = 'primary', isLoading, ...buttonProps } = props;
const buttonClasses = classNames(
className,
'flex items-center justify-center w-full px-8 py-2 mt-6 text-base font-bold transition-all duration-200 border border-transparent rounded-xl',
colors[color],
{
'cursor-not-allowed': Boolean(buttonProps.disabled) || isLoading,
},
);
return (
<button disabled={buttonProps.disabled} type="button" className={buttonClasses} {...buttonProps} ref={ref}>
{isLoading && <SpinnerIcon />}
{children}
</button>
);
});
Button.displayName = 'Button';
export default Button;