Function Button

src/components/Button/Button.react.js:15–64

const noop = () => {};

const Button = props => {
  const hasOnClick = props.onClick && !props.disabled;
  const classes = [styles.button, baseStyles.unselectable];
  // if a button is disabled, that overrides any color selection
  if (props.disabled) {
    classes.push(styles.disabled);
    if (props.color === 'white') {
      // This has a special disabled case
      classes.push(styles.white);
    }
  } else {
    if (props.primary) {
      classes.push(styles.primary);
    }
    if (props.color) {
      classes.push(styles[props.color]);
    }
    if (props.progress) {
      classes.push(styles.progress);
    }
  }
  const clickHandler = hasOnClick ? props.onClick : noop;
  let styleOverride = null;
  if (props.width) {
    styleOverride = {
      width: props.width,
      minWidth: props.width,
      ...props.additionalStyles,
    };
  }
  return (
    <button
      type="button"
      style={styleOverride}
      className={classes.join(' ')}
      onClick={clickHandler}
      onFocus={e => {
        if (props.disabled) {
          e.target.blur();
        }
      }}
      onMouseLeave={e => {
        // Remove focus when mouse leaves to prevent sticky focus states
        e.target.blur();
      }}
    >
      <span>{props.value}</span>
    </button>
  );
};

export default Button;