1 files changed, 23 insertions, 13 deletions
diff --git a/FrontEnd/src/views/common/button/Button.tsx b/FrontEnd/src/views/common/button/Button.tsx
index a39ef8a7..1e4163ff 100644
--- a/FrontEnd/src/views/common/button/Button.tsx
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -1,30 +1,40 @@
 import React from "react";
+import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 
-import { calculateProps, CommonButtonProps } from "./common";
+import { convertI18nText, I18nText } from "@/common";
+import { PaletteColorType } from "@/palette";
 
 import "./Button.css";
 
 function _Button(
-  props: CommonButtonProps & {
+  props: {
+    color?: PaletteColorType;
+    text?: I18nText;
     outline?: boolean;
-    customButtonClassName?: string;
-  },
+  } & React.ComponentPropsWithoutRef<"button">,
   ref: React.ForwardedRef<HTMLButtonElement>
-): React.ReactElement | null {
+): JSX.Element {
   const { t } = useTranslation();
 
-  const { customButtonClassName, outline, ...otherProps } = props;
+  const { color, text, outline, className, children, ...otherProps } = props;
 
-  const { newProps, children } = calculateProps(
-    otherProps,
-    customButtonClassName ?? "cru-button" + (outline ? " outline" : ""),
-    t
-  );
+  if (text != null && children != null) {
+    console.warn("You can't set both text and children props.");
+  }
 
   return (
-    <button ref={ref} {...newProps}>
-      {children}
+    <button
+      ref={ref}
+      className={classNames(
+        "cru-" + (color ?? "primary"),
+        "cru-button",
+        outline && "outline",
+        className
+      )}
+      {...otherProps}
+    >
+      {text != null ? convertI18nText(text, t) : children}
     </button>
   );
 }