1 files changed, 52 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/button.tsx b/packages/dev-tools-pages/ts/components/button.tsx
new file mode 100644
index 000000000..ae032eb05
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/button.tsx
@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+
+import { colors, media } from 'ts/variables';
+
+interface ButtonProps {
+    large?: boolean;
+}
+
+const Button = styled.button<ButtonProps>`
+    font-family: inherit;
+    line-height: 1;
+    font-weight: 500;
+    white-space: nowrap;
+    vertical-align: middle;
+    background-color: ${props => props.theme.colors.secondary};
+    color: ${colors.black};
+    border: 0;
+    border-radius: 5rem;
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+
+    ${props =>
+        props.large
+            ? `
+      font-size: 1rem;
+      padding: 1.1875rem 2.375rem 1.0625rem;
+  `
+            : `
+      font-size: .875rem;
+      padding: .5625rem 1.25rem;
+  `}
+
+    :hover, :focus {
+        background-color: ${props => props.theme.colors.secondary_alt};
+        outline: 0;
+    }
+
+    ${media.small`
+  font-size: .875rem;
+  padding: .5625rem 1.25rem;
+  `}
+
+    ${props =>
+        props.large &&
+        media.small`
+        font-size: 1rem;
+        padding: 1rem 1.5rem .75rem;
+    `}
+`;
+
+export { Button };