/
pellya
/
blogReactera
Обзор
Документация
Войти
/
pellya
/
blogReactera
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/shared/ui/Button/Button.tsx
59 строк
1 KB
rpellya@gmail.com
Add prettier
02 фев 2025, 22:40
02 фев 2025, 22:40
5f9ec21
Код
Авторство
О чём код?
import { ButtonHTMLAttributes, memo, ReactNode } from 'react'; import { classNames, Mods } from 'shared/lib/classNames/classNames'; import cls from './Button.module.scss'; export enum ButtonVariant { CLEAR = 'clear', CLEAR_INVERTED = 'clearInverted', OUTLINE = 'outline', OUTLINE_RED = 'outline_red', BACKGOUND = 'background', BACKGOUND_INVERTED = 'backgroundInverted', } export enum ButtonSize { M = 'size_m', L = 'size_l', XL = 'size_xl', } interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { className?: string; theme?: ButtonVariant; square?: boolean; size?: ButtonSize; disabled?: boolean; children?: ReactNode; } /** * Button component - with memo, because children is string on 99% */ export const Button = memo((props: ButtonProps) => { const { className, children, theme = ButtonVariant.OUTLINE, square, disabled, size = ButtonSize.M, ...otherProps } = props; const mods: Mods = { [cls[theme]]: true, [cls.square]: square, [cls[size]]: true, [cls.disabled]: disabled, }; return ( <button type="button" className={classNames(cls.Button, mods, [className, cls[theme]])} disabled={disabled} {...otherProps} > {children} </button> ); });