button.component.tsx

import { ButtonHTMLAttributes, DetailedHTMLProps } from "react";
import {
  ButtonDefault,
  ButtonGoogleSignin,
  ButtonInverted,
} from "./button.styles";

export const ButtonClasses = {
  default: ButtonDefault,
  googleSignin: ButtonGoogleSignin,
  inverted: ButtonInverted,
};

type ObjectKey = keyof typeof ButtonClasses;

const getCustomButton = (type: ObjectKey = "default") => {
  return ButtonClasses[type];
};

const Button: React.FC<
  DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
> = ({ children, className, ...props }) => {
  const CustomButton = getCustomButton(className as ObjectKey);

  return <ButtonDefault {...props}>{children}</ButtonDefault>;
};

export default Button;

button.styles.tsx

import { ButtonHTMLAttributes, DetailedHTMLProps } from "react";
import styled from "styled-components";

export const ButtonDefault = styled.button<
  DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
>`
  min-width: 165px;
  width: auto;
  height: 50px;
  letter-spacing: 0.5px;
  line-height: 50px;
  padding: 0 35px 0 35px;
  font-size: 15px;
  background-color: black;
  color: white;
  text-transform: uppercase;
  font-family: "Open Sans";
  font-weight: bolder;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;

  &:hover {
    background-color: white;
    color: black;
    border: 1px solid black;
  }
`;

export const ButtonGoogleSignin = styled(ButtonDefault)`
  background-color: #4285f4;
  color: white;

  &:hover {
    background-color: #357ae8;
    border: none;
  }
`;

export const ButtonInverted = styled(ButtonDefault)`
  background-color: white;
  color: black;
  border: 1px solid black;

  &:hover {
    background-color: black;
    color: white;
    border: none;
  }
`;