application/components/common/simple-editor/style-button.js

import React from 'react';
import FontIcon from 'material-ui/FontIcon';
import FlatButton from 'material-ui/FlatButton';

class StyleButton extends React.Component {
    constructor() {
        super();
        this.onToggle = (e) => {
            e.preventDefault();
            this.props.onToggle(this.props.style);
        };
    }

    render() {
        let className = 'simple-editor-styleButton';
        if (this.props.active) {
            className += ' simple-editor-activeButton';
        }

        let content;

        if (this.props.icon) {
            const iconClass = this.props.icon;
            content = (<FontIcon style={{'fontSize': '1rem'}} className='mui-icons'>{iconClass}</FontIcon>);
        } else {
            content = this.props.label;
        }

        return (
            <span className={className} title={this.props.label} onMouseDown={this.onToggle}>
                {content}
            </span>
        );
    }
}

export default StyleButton;