Button.js

Button.js

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import PlusIcon from 'react-icons/lib/fa/plus';
import CheckIcon from 'react-icons/lib/fa/check';

import { COLORS } from '../constants/styles';

const StyledButton = styled.button`
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border: 1px solid transparent;
  background-color: transparent;
  text-align: center;
  border-radius: 30px;
  cursor: pointer;
  ${({ fluid }) =>
    fluid &&
    `
    width: 100%;
  `};
  ${({ color }) => `
    color: ${COLORS[color.toUpperCase()]};
    border-color: ${COLORS[color.toUpperCase()]};
  `};
  &:hover {
    ${({ color }) => `
      background-color: ${COLORS[color.toUpperCase()]};
      color: #fff !important;
      border-color: ${COLORS[color.toUpperCase()]};
    `};
    svg path {
      ${({ color }) => `
        fill: #fff;
      `};
    }
  }
  svg {
    margin-right: 7px;
    path {
      ${({ color }) => `
        fill: ${COLORS[color.toUpperCase()]};
      `};
    }
  }
`;

const Button = ({ label, color, icon }) => (
  <StyledButton color={color}>
    {icon === 'plus' && <PlusIcon size="17" name="plus" />}
    {icon === 'check' && <CheckIcon size="17" name="check" />}
    {label}
  </StyledButton>
);

Button.propTypes = {
  label: PropTypes.string.isRequired,
  icon: PropTypes.string,
  color: PropTypes.string,
};

Button.defaultProps = {
  icon: '',
  color: 'blue',
};

export default Button;

// App.js
<Button fluid color="red" {...props}>Hello, World!</Button>