1 files changed, 30 insertions, 0 deletions
diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx
new file mode 100644
index 00000000..c4f22211
--- /dev/null
+++ b/extension/react-app/src/components/HeaderButtonWithText.tsx
@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+
+import { HeaderButton } from ".";
+
+interface HeaderButtonWithTextProps {
+  text: string;
+  onClick?: (e: any) => void;
+  children: React.ReactNode;
+}
+
+const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
+  const [hover, setHover] = useState(false);
+  return (
+    <HeaderButton
+      style={{ padding: "3px" }}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => {
+        setTimeout(() => {
+          setHover(false);
+        }, 100);
+      }}
+      onClick={props.onClick}
+    >
+      <span hidden={!hover}>{props.text}</span>
+      {props.children}
+    </HeaderButton>
+  );
+};
+
+export default HeaderButtonWithText;