.

src/components/styled-components/button.tsx

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+export const Button = styled.button`
+  padding: 1rem;
+  width: 100%;
+  display: block;
+  background-color: transparent;
+  border: 2px solid ${({theme, disabled}) => !disabled ? theme.colors.primary : theme.colors.lightGray};
+  color: ${({theme, disabled}) => !disabled ? theme.colors.primary : theme.colors.lightGray};
+  font-size: 1rem;
+  border-radius: 1rem;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.secondary};
+  }
+  &.small {
+    width: inherit;
+    display: inline;
+  }
+
+  &.primary {
+    color: ${({theme}) => theme.colors.white};
+    background-color: ${({theme, disabled}) => !disabled ? theme.colors.primary : theme.colors.lightGray};
+    &:hover {
+      background-color: ${({ theme }) => theme.colors.secondary};
+      color: ${({theme}) => theme.colors.primary};
+    }
+  }
+
+  &.thin {
+    padding: 1px;
+    display: block;
+  }
+`;