foo.js

const toggleClass = (id, toggle) => id === toggle ? 'toggle active' : 'toggle inactive';

const Style = ({ activeFontColor, activeBackgroundColor, fontColor }) => (
  <style jsx>
    {`
      .toggle {
        width: 50%;
        height: 50px;
        border-radius: 100px;
        line-height: 50px;
        float: left;
      }
      .active{
        color: ${activeFontColor};
        background-color: ${activeBackgroundColor};
        border-radius:100px;
      }
      .inactive{
        cursor: pointer;
        color: ${fontColor};
      }
    `}
  </style>
);

const Button = ({ id,
                  value,
                  activeToggle,
                  activeBackgroundColor,
                  fontColor,
                  activeFontColor,
                  handleToggle }) =>
(
  <div className={toggleClass(id, toggle)} onClick={() => handleToggle && handleToggle(id, value) }>
    {value}
    <Style {...{ activeFontColor, fontColor, activeBackgroundColor }} />
  </div>
);

Button.defaultProps = {
  backgroundColor: "white",
  fontColor: "#4a4a4a",
  activeBackgroundColor: "#ff5122",
  activeFontColor: "white",
}

export default Button;