Component cleanup

app/components/buttons/InlineTextButton/InlineTextButton.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { memo } from "react";
+
+export interface InlineTextButtonProps {
+  /**
+   * Button label content.
+   */
+  children: React.ReactNode;
+  /**
+   * Click handler.
+   */
+  onClick?: (_event: React.MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * Extra class names. Use `className` to override typography/color when the
+   * button must inherit parent font-size/leading (e.g. mid-paragraph usage).
+   */
+  className?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+/**
+ * Small text-styled button for in-paragraph "link"-like controls (expand,
+ * add, etc.). The Figma "link" treatment is a tertiary-colored underline with
+ * a 3px underline-offset and inherited typography, which sits between a real
+ * anchor and a styled `Button`.
+ *
+ * Use this anywhere a `<button>` is needed inline with body copy — do not use
+ * for primary/secondary actions (reach for `Button` instead).
+ */
+function InlineTextButtonComponent({
+  children,
+  onClick,
+  className = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: InlineTextButtonProps) {
+  const baseClasses =
+    "cursor-pointer border-none bg-transparent p-0 font-inter font-normal text-[length:inherit] leading-[inherit] text-[color:var(--color-content-default-tertiary,#b4b4b4)] underline decoration-solid underline-offset-[3px] hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)] disabled:cursor-not-allowed disabled:opacity-60";
+
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      className={`${baseClasses} ${className}`.trim()}
+    >
+      {children}
+    </button>
+  );
+}
+
+InlineTextButtonComponent.displayName = "InlineTextButton";
+
+export default memo(InlineTextButtonComponent);