CButton.styl

.button
  user-select none
  cursor pointer
  position relative
  display block
  align-items center
  transition all 0.3s ease-out
  text-align center
  box-sizing border-box
  overflow hidden
  padding 0 15px
  background #0040ff
  border 1px solid rgba(0, 64, 255, 0.4)
  border-radius 3px
  white-space nowrap

  .buttonContent
    display inline-block

  > span
    color #fff

.buttonIconOnly
  padding 0
  background transparent
  border none
  outline 0
  display inline-block

.buttonIconOnly:focus
  outline 0

.BIG
  margin 0 8px
  height 32px
  padding 0 32px
  border-radius 3px
  border 1px solid #7e7e7e
  box-shadow 0 1px 1px #7f7f7f
  background transparent;
  background linear-gradient(to bottom, #E4E4E4 0%,#7F7F7F 100%)

  span
    color #333
    font-weight bold
    font-size 16px

  &:hover
    box-shadow none
    background linear-gradient(to bottom, #7F7F7F 0%,#E4E4E4 100%)

.disabled
  background linear-gradient(to bottom, #ffffff 0%,#E4E4E4 100%)
  background-color #ffffff
  border-color #bfbfbf
  box-shadow none

  &:hover
    background linear-gradient(to bottom, #ffffff 0%,#E4E4E4 100%)

  span
    color #b2b2b2

.loading

  span
    color transparent

  &::before
    position absolute
    left calc(50% - 10px)
    top calc(50% - 10px)
    content '.'
    font-size 0
    width 10px
    border-radius 50%
    animation spinAnimation 1s linear infinite
    border 2px solid inactiveLabelColor
    border-bottom-color transparent
    size 20px

.FLAT
  background 0
  box-shadow none
  border 0

.LINK
  background 0
  box-shadow none
  border 0

  span
    color #0040ff
    text-decoration underline

.DEFAULT
  background-color unset

  .buttonContent
    color textColor

.LOGIN
  background-color unset
  border 0
  border-top 1px solid #C9CBCE
  border-radius 0

  .buttonContent
    color defaultColor

CButton.tsx

// @flow
import React, { Component } from "react"
import classNames from "classnames/bind"
import { CIcon } from "components"

const style = classNames.bind(require("./theme.styl"))

const classes = {
  active: style("active"),
  disabled: style("disabled"),
  loading: style("loading"),
}

type displayValuesType = "DEFAULT" | "FLAT" | "BIG" | "LINK" | "LOGIN"
export const CButtonDisplayType: { [key: string]: displayValuesType } = {
  DEFAULT: "DEFAULT",
  FLAT: "FLAT",
  BIG: "BIG",
  LINK: "LINK",
  LOGIN: "LOGIN",
}

type valuesType = "button" | "submit"
export const CButtonType: { [key: string]: valuesType } = {
  DEFAULT: "button",
  SUBMIT: "submit",
}

interface propsType {
  children?: ?Node,
  className?: ?string,
  description?: ?string,
  displayType?: ?displayValuesType,
  form?: ?string,
  icon?: ?string,
  iconSize?: ?number,
  iconColor?: ?string,
  isActive?: ?boolean,
  isDisabled?: ?boolean,
  isLoading?: ?boolean,
  onClick?: ?(e: SyntheticMouseEvent) => mixed,
  title?: ?string,
  type?: ?valuesType,
}

export default class CButton extends Component<void, propsType, void> {
  onClick = (e: SyntheticMouseEvent) => {
    const { isDisabled, isLoading, onClick } = this.props
    if (!isDisabled && onClick && !isLoading) {
      onClick(e)
    } else if (isDisabled) {
      e.stopPropagation()
      e.preventDefault()
    }
  }

  render() {
    const {
      children,
      className,
      description,
      displayType,
      form,
      icon,
      iconColor,
      iconSize,
      isActive,
      isDisabled,
      isLoading,
      title,
      type,
    } = this.props

    const addClassName: string = style(
      "button",
      className ? className : void 0,
      displayType ? CButtonDisplayType[displayType] : void 0,
      !title && icon ? "buttonIconOnly" : void 0,
      classNames({
        [classes.active]: Boolean(isActive),
        [classes.loading]: Boolean(isLoading),
        [classes.disabled]: Boolean(isDisabled),
      })
    )

    return (
      <button
        form={form ? form : void 0}
        className={addClassName}
        onClick={this.onClick}
        title={description}
        type={type || CButtonType.DEFAULT}
      >
        {Boolean(title) &&
          <span className={style("buttonContent")}>
            {title}
          </span>}
        {children}
        {Boolean(icon) &&
          <CIcon color={iconColor} type={icon} size={iconSize || 24} />}
      </button>
    )
  }
}