import React from 'react'; import ReactTooltip from 'react-tooltip'; import classNames from 'classnames'; import Icon from './Icon'; import styles from './Button.module.css'; export default 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> ); }