2 files changed, 33 insertions, 7 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..d70a3d70
--- /dev/null
+++ b/extension/react-app/src/components/HeaderButtonWithText.tsx
@@ -0,0 +1,26 @@
+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={() => setHover(false)}
+      onClick={props.onClick}
+    >
+      <span hidden={!hover}>{props.text}</span>
+      {props.children}
+    </HeaderButton>
+  );
+};
+
+export default HeaderButtonWithText;
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index b0116e92..480f517f 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -21,9 +21,7 @@ import {
 } from "@styled-icons/heroicons-outline";
 import { HistoryNode } from "../../../schema/HistoryNode";
 import ReactMarkdown from "react-markdown";
-import ContinueButton from "./ContinueButton";
-import InputAndButton from "./InputAndButton";
-import ToggleErrorDiv from "./ToggleErrorDiv";
+import HeaderButtonWithText from "./HeaderButtonWithText";
 
 interface StepContainerProps {
   historyNode: HistoryNode;
@@ -152,23 +150,25 @@ function StepContainer(props: StepContainerProps) {
             </HeaderButton> */}
 
             <>
-              <HeaderButton
+              <HeaderButtonWithText
                 onClick={(e) => {
                   e.stopPropagation();
                   props.onDelete();
                 }}
+                text="Delete"
               >
                 <XMark size="1.6em" onClick={props.onDelete} />
-              </HeaderButton>
+              </HeaderButtonWithText>
               {props.historyNode.observation?.error ? (
-                <HeaderButton
+                <HeaderButtonWithText
+                  text="Retry"
                   onClick={(e) => {
                     e.stopPropagation();
                     props.onRetry();
                   }}
                 >
                   <ArrowPath size="1.6em" onClick={props.onRetry} />
-                </HeaderButton>
+                </HeaderButtonWithText>
               ) : (
                 <></>
               )}