Create Button component

TheeDouglasAM3 · Jan 28, 2021 · 5bf6e02 · 5bf6e02
1 parent 2282ccf
commit 5bf6e02
Showing 1 changed file with 33 additions and 0 deletions.
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+
+const Button = styled.button`
+ background-color: ${({ theme }) => theme.colors.secondary};
+ color: ${({ theme }) => theme.colors.contrastText};
+ border-radius: ${({ theme }) => theme.borderRadius};
+ border: 0;
+ width: 100%;
+ padding: 10px 16px;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 1;
+ text-transform: uppercase;
+ outline: 0;
+ transition: .3s;
+ cursor: pointer;
+ &:hover,
+ &:focus {
+ opacity: .7;
+ }
+ &:disabled {
+ background-color: #979797;
+ cursor: not-allowed;
+ }
+`
+
+Button.propTypes = {
+ type: PropTypes.oneOf(['submit', 'type', 'button']).isRequired,
+ children: PropTypes.node.isRequired,
+}
+
+export default Button