diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss index acc1b1f6c799ea2f480a83ab5ab36f4ca2e17aea..9bc86d846e57b07c1395607c9d5135fae9dfb948 100644 --- a/src/components/Button/Button.module.scss +++ b/src/components/Button/Button.module.scss @@ -1,3 +1,25 @@ -.customButton { - background-color: red; -} +.button { + /*background-color: purple; + color:white; + position: relative; + font-size: 12px; + font-weight: 700; + align-items: center; + letter-spacing: 0.7px; + text-align: center; + -moz-box-align: center; + text-decoration: none; + display: inline-block; + border-radius: 10px; + -webkit-transition: background-color 0.2s ease-in; + transition: background-color 0.2s ease-in; + cursor: pointer; + padding: 10px 30px;*/ + font-size: .875rem; + position: relative; + transition: all .15s ease; + letter-spacing: .025em; + text-transform: none; + will-change: transform; + } + \ No newline at end of file diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx index 81d9f273cf0dc01672cda8f26e51b6cc500a58a5..7228d5ceae255469fc7f7d187bb626efcaaab99c 100644 --- a/src/components/Button/index.jsx +++ b/src/components/Button/index.jsx @@ -1,12 +1,34 @@ 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, + disabled, + ButtonClick, + } = props; + return ( + <div className={style.button}> + <button + onClick={ButtonClick} + className= "button" + disabled={disabled} + > + {label} + </button> + </div> + ); + } +Button.propTypes = { + label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), + disabled: PropTypes.bool, + ButtonClick: PropTypes.func, +}; +Button.defaultProps = { + label:"NEW" + } + export default Button; -Button.propTypes = {}; - -export default Button;