import React from 'react'; import PropTypes from 'prop-types'; import ReactTooltip from 'react-tooltip'; import classNames from 'classnames'; import Icon from './Icon'; import styles from './Button.module.css'; function Button({ type = 'button', icon, size, variant, children, className, tooltip, tooltipId, disabled, iconRight, onClick = () => {}, ...props }) { return ( <button data-tip={tooltip} data-effect="solid" data-for={tooltipId} type={type} className={classNames(styles.button, className, { [styles.large]: size === 'large', [styles.small]: size === 'small', [styles.xsmall]: size === 'xsmall', [styles.action]: variant === 'action', [styles.danger]: variant === 'danger', [styles.light]: variant === 'light', [styles.iconRight]: iconRight, })} disabled={disabled} onClick={!disabled ? onClick : null} {...props} > {icon && <Icon className={styles.icon} icon={icon} size={size} />} {children && <div className={styles.label}>{children}</div>} {tooltip && <ReactTooltip id={tooltipId}>{tooltip}</ReactTooltip>} </button> ); } Button.propTypes = { type: PropTypes.oneOf(['button', 'submit', 'reset']), icon: PropTypes.node, size: PropTypes.oneOf(['xlarge', 'large', 'medium', 'small', 'xsmall']), variant: PropTypes.oneOf(['action', 'danger', 'light']), children: PropTypes.node, className: PropTypes.string, tooltip: PropTypes.node, tooltipId: PropTypes.string, disabled: PropTypes.bool, iconRight: PropTypes.bool, onClick: PropTypes.func, }; export default Button;