2 files changed, 83 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/asrouter/components/Button/Button.jsx b/browser/components/newtab/content-src/asrouter/components/Button/Button.jsx
new file mode 100644
index 0000000000..b3ece86f16
--- /dev/null
+++ b/browser/components/newtab/content-src/asrouter/components/Button/Button.jsx
@@ -0,0 +1,32 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from "react";
+
+const ALLOWED_STYLE_TAGS = ["color", "backgroundColor"];
+
+export const Button = props => {
+  const style = {};
+
+  // Add allowed style tags from props, e.g. props.color becomes style={color: props.color}
+  for (const tag of ALLOWED_STYLE_TAGS) {
+    if (typeof props[tag] !== "undefined") {
+      style[tag] = props[tag];
+    }
+  }
+  // remove border if bg is set to something custom
+  if (style.backgroundColor) {
+    style.border = "0";
+  }
+
+  return (
+    <button
+      onClick={props.onClick}
+      className={props.className || "ASRouterButton secondary"}
+      style={style}
+    >
+      {props.children}
+    </button>
+  );
+};
diff --git a/browser/components/newtab/content-src/asrouter/components/Button/_Button.scss b/browser/components/newtab/content-src/asrouter/components/Button/_Button.scss
new file mode 100644
index 0000000000..35234be4b0
--- /dev/null
+++ b/browser/components/newtab/content-src/asrouter/components/Button/_Button.scss
@@ -0,0 +1,51 @@
+.ASRouterButton {
+  font-weight: 600;
+  font-size: 14px;
+  white-space: nowrap;
+  border-radius: 2px;
+  border: 0;
+  font-family: inherit;
+  padding: 8px 15px;
+  margin-inline-start: 12px;
+  color: inherit;
+  cursor: pointer;
+
+  .tall & {
+    margin-inline-start: 20px;
+  }
+
+  &.test-only {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    display: block;
+    visibility: hidden;
+  }
+
+  &.primary {
+    border: 1px solid var(--newtab-primary-action-background);
+    background-color: var(--newtab-primary-action-background);
+    color: var(--newtab-primary-element-text-color);
+
+    &:hover {
+      background-color: var(--newtab-primary-element-hover-color);
+    }
+
+    &:active {
+      background-color: var(--newtab-primary-element-active-color);
+    }
+  }
+
+  &.slim {
+    border: $border-primary;
+    margin-inline-start: 0;
+    font-size: 12px;
+    padding: 6px 12px;
+
+    &:hover,
+    &:focus {
+      box-shadow: $shadow-primary;
+      transition: box-shadow 150ms;
+    }
+  }
+}