react-md-components/src/floatingbutton/index.js

This is a react module containing a free collection of material design components.

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import style from './style/floatingbutton.module.scss';
import MDIcon from '../icon/index';
import palette from './style/floatingbutton.palette.module.scss';

const MDFloatingButton = React.forwardRef((props, ref) => {
  const children = props.children;

  return (
    <div
      className={`${
        !props.mini ? style.MDFloatingButton : style.MDFloatingButtonMini
      } ${palette.MDFloatingButton} ${props.className}`}
      style={{ background: `${props.accentColor}` }}
      onClick={props.onClick}
    >
      <button className={style.Content} ref={ref} disabled={props.disabled}>
        {<MDIcon icon={props.icon} color={props.color} />}
      </button>
    </div>
  );
});

MDFloatingButton.propTypes = {
  children: PropTypes.any,
  mini: PropTypes.bool,
  className: PropTypes.string,
  icon: PropTypes.string,
  color: PropTypes.string,
  onClick: PropTypes.func,
  accentColor: PropTypes.string,
  disabled: PropTypes.bool
};

MDFloatingButton.defaultProps = {
  mini: false,
  icon: '',
  className: '',
  children: [],
  onClick: null,
  accentColor: '',
  color: '',
  disabled: false
};

export { MDFloatingButton };
export default MDFloatingButton;