CSS modules w/ classnames

Button.js

 import { PureComponent, PropTypes } from 'react';
import classNames from 'classnames/bind';

import Icon from 'components/ui/Icon';

import styles from './Button.css';
const cx = classNames.bind(styles);

/**
 * Button component. Needed to trigger an operations.
 */
export default class Button extends PureComponent {
    static propTypes = {
        className: PropTypes.string,

        /**
         * Red danger button
         */
        danger: PropTypes.bool,

        /**
         * Is button disabled
         */
        disabled: PropTypes.bool,

        /**
         * Width with width of 100%
         */
        fullWidth: PropTypes.bool,

        /**
         * Button without fill, border only
         */
        ghost: PropTypes.bool,

        /**
         * Button label
         */
        label: PropTypes.node.isRequired,

        /**
         * Is loading state (spinner will be displayed)
         */
        loading: PropTypes.bool,

        /**
         * Primary application colored button
         */
        primary: PropTypes.bool,

        /**
         * Secondary application colored button
         */
        secondary: PropTypes.bool,

        /**
         * Button size. Could be default, small or large
         */
        size: PropTypes.oneOf(['small', 'default', 'large']),

        /**
         * Green success button
         */
        success: PropTypes.bool,

        /**
         * Orange warning button
         */
        warning: PropTypes.bool,

        /**
         * Callback on click
         */
        onClick: PropTypes.func,
    };

    static defaultProps = {
        size: 'default',
    }

    render() {
        const {
            label,
            className,
            disabled,
            loading,
            secondary,
            primary,
            warning,
            danger,
            success,
            size,
            fullWidth,
            ghost,
            ...otherProps
        } = this.props;

        const classes = cx(className, size, 'base', {
            disabled,
            loading,
            secondary,
            primary,
            danger,
            success,
            warning,
            fullWidth,
            ghost,
        });

        return (
            <button
                className={classes}
                {...otherProps}
            >
                <span className={styles.label}>
                    {label}
                </span>

                {
                    loading
                    && (
                        <div className={styles.loadingContainer}>
                            <Icon
                                spinning
                                type="loading"
                            />
                        </div>
                    )
                }
            </button>
        );
    }
}