React Stateless Functional Button Component

Button.jsx

import React from 'react';
import classNames from 'classnames';
import filterKeys from './filterKeys';
import './button.less';

const Button = (props) => {
  let elementProps = filterKeys( props, Button.propTypes );
  return <button {...elementProps} className={classNames( {
    button: true,
    'button--primary': props.type == 'primary' || props.type == 'submit'
  } )}>{props.children}</button>;
};

Button.propTypes = {
  type: React.PropTypes.string
};

export default Button;

button.less

@import "react-widgets-theme";

.button {
  background-color: white;
  color: @btn-color;
  text-transform: uppercase;
  border-radius: @border-radius;
  border: 1px solid @btn-border;
  padding: 9px 51px;

  &--primary {
    color: #fff;
    background-color: @blue;
  }
}

example.jsx

import React from 'react';
import Button from './Button';

const Widget = ( props ) => <div>
  <Button disabled={props.disabled} onClick={props.reset}>Clear Data</Button>
  <Button type="submit" disabled={props.submitting}>Get Results</Button>
</div>;

export default Widget;

filterKeys.js

'use strict';

var filterKeys = function ( targetObject, filterObject ) {
  var result = Object.assign( {}, targetObject );

  for ( var key in filterObject ) {
    if ( filterObject.hasOwnProperty( key ) ) {
      delete result[ key ];
    }
  }

  return result;
};

module.exports = filterKeys;