Тимур Городецкий
47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import * as React from 'react';
|
|
import styles from './Button.module.scss';
|
|
|
|
type ButtonVariant = 'primary' | 'accent' | 'secondary' | 'ghost' | 'danger';
|
|
type ButtonSize = 'md' | 'sm';
|
|
|
|
interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: ButtonVariant;
|
|
size?: ButtonSize;
|
|
fullWidth?: boolean;
|
|
}
|
|
|
|
const variantClass: Record<ButtonVariant, string> = {
|
|
primary: styles.primary,
|
|
accent: styles.accent,
|
|
secondary: styles.secondary,
|
|
ghost: styles.ghost,
|
|
danger: styles.danger
|
|
};
|
|
|
|
export const Button: React.FC<IButtonProps> = ({
|
|
variant = 'secondary',
|
|
size = 'md',
|
|
fullWidth = false,
|
|
type = 'button',
|
|
className,
|
|
children,
|
|
...rest
|
|
}) => {
|
|
const classes = [
|
|
styles.btn,
|
|
variantClass[variant],
|
|
size === 'sm' ? styles.sm : '',
|
|
fullWidth ? styles.full : '',
|
|
className
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
|
|
// type по умолчанию 'button', чтобы кнопки внутри формы не сабмитили её случайно.
|
|
return (
|
|
<button type={type} className={classes} {...rest}>
|
|
{children}
|
|
</button>
|
|
);
|
|
};
|