@appearhere/bloom/components/FloatingActionBtn/FloatingActionBtn.js

Appear Here's pattern library and styleguide

import PropTypes from 'prop-types';
import React from 'react';
import classnames from 'classnames';

import css from './FloatingActionBtn.css';

/**
 * https://material.io/guidelines/components/buttons-floating-action-button.html
 */
const FloatingActionBtn = (props) => {
  const {
    children,
    className,
    onClick,
    type,
    disabled,
    context,
    ...rest
  } = props;

  const handleClick = (e) => {
    onClick(e);
  };

  const classes = classnames(
    css.root,
    className,
    css[context],
  );

  return (
    <button
      className={classes}
      type={type}
      onClick={handleClick}
      disabled={disabled}
      {...rest}
    >
      { children }
    </button>
  );
};

FloatingActionBtn.propTypes = {
  children: PropTypes.node.isRequired,
  className: PropTypes.string,
  onClick: PropTypes.func,
  type: PropTypes.oneOf(['submit', 'reset', 'button', 'menu']),
  disabled: PropTypes.bool,
  context: PropTypes.oneOf(['primary', 'danger', 'action', 'whiteout']),
};

FloatingActionBtn.defaultProps = {
  type: 'button',
};

export default FloatingActionBtn;