Skip to content

Instantly share code, notes, and snippets.

@IainIsCreative

IainIsCreative/Button.react.js

Forked from jamesslock/Button.react.js
Created July 9, 2017 00:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save IainIsCreative/d320546942c2a47f3e1a192ae43c16e1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save IainIsCreative/d320546942c2a47f3e1a192ae43c16e1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @jamesslock jamesslock created this gist Apr 20, 2016.
    82 changes: 82 additions & 0 deletions Button.react.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,82 @@
    import React, { Component, PropTypes } from 'react';
    import { Link } from 'react-router';

    import css from './Button.css';

    export default class Button extends Component {
    render() {

    const {
    className,
    active,
    buttonType,
    children,
    context,
    size,
    style,
    varient,
    fullWidth,
    onClick,
    ...remainingProps,
    } = this.props;

    const classNames = [
    css.root,
    context ? css[context] : null,
    varient ? css[varient] : null,
    css ? css[css] : null,
    size ? css[size] : null,
    fullWidth ? css.fullWidth : null,
    active ? css.active : null,
    className,
    ].join(' ');

    return buttonType === 'Link' ?

    <Link
    className={classNames}
    {...remainingProps}
    >
    {children}
    </Link>

    :

    <button
    className={classNames}
    onClick={onClick}
    {...remainingProps}
    >
    {children}
    </button>

    }
    };

    Button.propTypes = {
    active: PropTypes.bool,
    children: PropTypes.any,
    className: PropTypes.string,
    fullWidth: PropTypes.bool,
    context: PropTypes.oneOf([
    'primary',
    'secondary',
    'tertiary'
    ]),
    varient: PropTypes.oneOf([
    'link',
    'outline',
    ]),
    style: PropTypes.oneOf([
    'soft',
    'hard',
    ]),
    size: PropTypes.oneOf([
    'natural',
    'small',
    'medium',
    'large',
    'huge',
    ]),
    onClick: PropTypes.func,
    };