From 7778ccaa61f688144e4c8daf6bfed511db00b1b7 Mon Sep 17 00:00:00 2001
From: kaushik <kaushik.shetty@niveussolutions.com>
Date: Tue, 11 Jan 2022 16:46:41 +0530
Subject: [PATCH] button component

---
 src/components/Button/Button.module.scss | 44 ++++++++++++++++++++++--
 src/components/Button/index.jsx          | 27 +++++++++++++--
 2 files changed, 66 insertions(+), 5 deletions(-)

diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index acc1b1f..66842d0 100644
--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
@@ -1,3 +1,43 @@
-.customButton {
-  background-color: red;
+.button {
+  font-size: 0.75rem;
+  color: #5e72e4 !important;
+  position: relative;
+  transition: all 0.15s ease !important;
+  letter-spacing: 0.025em;
+  text-transform: none;
+  will-change: transform;
+  line-height: 1.5 !important;
+  padding: 0.25rem 0.5rem !important;
+  border-radius: 0.25rem !important;
+  border-color: #fff;
+  background-color: #fff !important;
+  box-shadow: 0 4px 6px rgba(0.1, 0.1, 0.1, 0.11),
+    0 1px 3px rgba(0.1, 0.1, 0.1, 0.8);
+  font-weight: 600;
+  line-height: 1.5 !important;
+  display: inline-block;
+  /* padding: 0.625rem 1.25rem!important; */
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
+  text-align: center;
+  vertical-align: middle;
+  border: 1px solid transparent;
+  border-radius: 0.25rem !important;
+  margin-right: 16px;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 7px 14px rgba(0.5, 0.5, 0.93, 0.1),
+      0 3px 6px rgba(0, 0, 0, 0.8);
+    color: #212529 !important;
+    border-color: #fff !important;
+    background-color: #fff !important;
+  }
+  &.filledbutton {
+    color: #fff;
+    background-color: #5e72e4;
+  }
 }
diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx
index 81d9f27..e3f6dbf 100644
--- a/src/components/Button/index.jsx
+++ b/src/components/Button/index.jsx
@@ -1,12 +1,33 @@
 import React from "react";
 import PropTypes from "prop-types";
 import cs from "classnames";
-import styles from "./Button.module.scss";
+import style from "./Button.module.scss";
 
 function Button(props) {
-  return <div className={cs(styles.customButton)}>here</div>;
+  const { label, customClass, disabled, variant, handleButtonClick } = props;
+  return (
+    <button
+      onClick={handleButtonClick}
+      className={cs(style.button, style[variant], customClass)}
+      disabled={disabled}
+    >
+      {label}
+    </button>
+  );
 }
 
-Button.propTypes = {};
+Button.propTypes = {
+  customClass: PropTypes.string,
+  label: PropTypes.string,
+  disabled: PropTypes.bool,
+  variant: PropTypes.oneOf(["filledbutton"]),
+  handleButtonClick: PropTypes.func,
+};
+
+Button.defaultProps = {
+  label: "Button",
+  variant: "filledbutton",
+  customClass: "",
+};
 
 export default Button;
-- 
GitLab