Maybe there's a reason to put all that effort in to make a single, generic component but it leads to a list of 'if statements' to build up a set of styles where a lot of them are mutually exclusive - a button can't be both a Google style button and a Facebook style button - and the code doesn't have any checks for that.
It'd be a lot easier (not to mention likely faster) to build the styles in SCSS and just pass in a list of what's needed directly to the button's className prop as a string, eg className={"link lined google large"} with CSS rules for .link, .google, .lined, and .large that override styles from the previous class as necessary.
Maybe there's a reason to put all that effort in to make a single, generic component but it leads to a list of 'if statements' to build up a set of styles where a lot of them are mutually exclusive - a button can't be both a Google style button and a Facebook style button - and the code doesn't have any checks for that.
It'd be a lot easier (not to mention likely faster) to build the styles in SCSS and just pass in a list of what's needed directly to the button's className prop as a string, eg className={"link lined google large"} with CSS rules for .link, .google, .lined, and .large that override styles from the previous class as necessary.