button-set.css

.button {
	margin-left: 10px;
}

.button:first-child {
	margin-left: 0;
}

button-set.js

import React, { Component } from 'react';
import styles from './style.css';
import Button from '../button';

export default class ButtonSet extends Component {
	buildButtons(buttons) {
		return buttons.map(function(button) {
			return (
				<Button theme={ button.theme } href={ button.href } size={ button.size } className={ styles.button }>{ button.label }</Button>
			)
		});
	}

	render() {
		return (
			<div className={ styles.container }>
				{ this.buildButtons(this.props.buttons) }
			</div>
		);
	}
}

button.css

.ele {
	background-color: 'light-grey';
	border: 0;
	cursor: pointer;
	padding: .5em 1em;
	font-size: 16px;
}

/* look at postCSS plugin for nesting this */
.ele:hover {
	background-color: grey;
	color: white;
}

.primary {
	background-color: $brandColor;
	color: white;
}

.primary:hover {
	background-color: $blueDark;
}

.success {
	background-color: $green;
	color: white;
}

.success:hover {
	background-color: $greenDark;
}

.info {
	background-color: $blueLight;
	color: white;
}

.info:hover {
	/* look into tool for color transformations */
	background-color: $blue;
}

.danger {
	background-color: $red;
	color: white;
}

.danger:hover {
	background-color: $redDark;
}

.large {
	padding: 1em 2em;
}

button.js

import React, { Component } from 'react';
import classNames from 'classnames';
import styles from './style.css';

export default class Button extends Component {
	render() {
		var classes = classNames(
			styles.ele,
			this.props.theme ? styles[this.props.theme] : '',
			this.props.size ? styles[this.props.size] : '',
			this.props.className ? this.props.className : ''
		);

		return (
			<a href={ this.props.href } className={ classes } onClick={ this.props.handler } role="button">
				{this.props.children}
			</a>
		);
	}
};