1 files changed, 30 insertions, 18 deletions
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx
index a7e34f91..2764f92e 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.tsx
+++ b/FrontEnd/src/views/common/button/LoadingButton.tsx
@@ -1,28 +1,40 @@
 import React from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+
+import { convertI18nText, I18nText } from "@/common";
+import { PaletteColorType } from "@/palette";
 
-import { CommonButtonProps } from "./common";
-import Button from "./Button";
 import Spinner from "../Spinner";
 
-const LoadingButton: React.FC<{ loading?: boolean } & CommonButtonProps> = ({
-  loading,
-  disabled,
-  color,
-  ...otherProps
-}) => {
+function LoadingButton(
+  props: {
+    color?: PaletteColorType;
+    text?: I18nText;
+    loading?: boolean;
+  } & React.ComponentPropsWithoutRef<"button">
+): JSX.Element {
+  const { t } = useTranslation();
+
+  const { color, text, loading, className, children, ...otherProps } = props;
+
+  if (text != null && children != null) {
+    console.warn("You can't set both text and children props.");
+  }
+
   return (
-    <Button
-      color={color}
-      outline
-      disabled={disabled || loading}
+    <button
+      className={classNames(
+        "cru-" + (color ?? "primary"),
+        "cru-button outline",
+        className
+      )}
       {...otherProps}
     >
-      {otherProps.children}
-      {loading ? (
-        <Spinner className="cru-align-text-bottom ms-1" color={color} />
-      ) : null}
-    </Button>
+      {text != null ? convertI18nText(text, t) : children}
+      {loading && <Spinner />}
+    </button>
   );
-};
+}
 
 export default LoadingButton;