c-form-button-1.0.0

c-form-button-1-0-0.markdown

c-form-button-1.0.0

A Pen by not important on CodePen.

License.

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://fb.me/react-dom-15.0.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.min.js"></script>

script.babel

class FormButton extends React.Component {
  static propTypes = {
    className: React.PropTypes.string,
    disabled: React.PropTypes.bool,
    label: React.PropTypes.string.isRequired,
    onClick: React.PropTypes.func,
    type: React.PropTypes.string.isRequired
  };

  render () {
    const {
      disabled,
      label,
      onClick,
      type
    } = this.props;
    const className = classNames({
      'c-form-button': true,
      [this.props.className]: true
    });
    return (
      <button {...{className, disabled, onClick, type}}>{label}</button>
    );
  }
}

style.scss

/* begin form button */
.c-form-button {
  border: solid 1px #fff;
  border-radius: $control-radius;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  font-weight: 600;
  margin: 0.85em 0;
  padding: round($inuit-global-spacing-unit-small * 0.5) $inuit-global-spacing-unit;
  text-align: center;
  vertical-align: middle;
}

.c-form-button--primary {
  background-color: $brand-primary;
  border-color: $brand-primary;

  &.c-form-button--disabled,
  &:disabled {
    background-color: #a0dae9;
    border-color: #a0dae9;
  }

  &.c-form-button--inverse {
    background-color: #fff;
    color: $brand-primary;
    border-color: $brand-primary;
  }
}

.c-form-button--alternate {
  background-color: #fff;
  border-color: $gray-lighter;
  color: $text-base-lighter-color;
}

.c-form-button--destructive {
  background-color: $brand-danger;
  border-color: $brand-danger;
}

.c-form-button--block {
  width: 100%;
}
/* end form button */

styles

<link href="http://codepen.io/clindsey/pen/jVMoKL" rel="stylesheet" />
<link href="http://codepen.io/clindsey/pen/XNKwXY" rel="stylesheet" />