Skip to content
Snippets Groups Projects
Commit 7778ccaa authored by Kaushik's avatar Kaushik
Browse files

button component

parent ee5d99b6
Branches
No related tags found
2 merge requests!13Feature/kaushik/footer,!8button component
.customButton { .button {
background-color: red; 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;
}
} }
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import cs from "classnames"; import cs from "classnames";
import styles from "./Button.module.scss"; import style from "./Button.module.scss";
function Button(props) { 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; export default Button;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment