skyquake/framework/widgets/button/sq-button.jsx

import React from 'react';

import 'style/base.scss';
import './button.scss';

const icons = {
    check: require("style/icons/svg-sprite-navigation-symbol.svg")  + "#ic_check_24px"
}

export default class SqButton extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        let {icon, primary, size, disabled, label, ...props} = this.props;
        let svgHTML = null;
        let Class = "SqButton";
        if(icon) {
            svgHTML = <svg className="svg-24px SqButton-icon">
            <use xlinkHref={icons[icon]}></use></svg>;
        }
        if(primary) {
            Class += " SqButton--primary";
        } else {
            Class += " SqButton--normal";
        }
        if(size && (
                size == 'small'
                || size == 'medium'
                || size == 'large'
                )
            ) {
            Class += " SqButton--" + size;
        }
        if(disabled) {
            Class += " is-disabled";
        }
        return (
                <div style={{display: 'flex'}}>
            <div className={Class} tabIndex="0">
            {svgHTML}
              <div className="SqButton-content">{label}</div>
            </div>
            </div>
        )
    }
}

SqButton.defaultProps = {
    icon: false,
    primary: false,
    disabled: false,
    size: false, // 'small', 'medium', 'large'
    label: 'Submit'
}