4 files changed, 5 insertions, 8 deletions
diff --git a/FrontEnd/src/views/common/button/Button.tsx b/FrontEnd/src/views/common/button/Button.tsx
index 0f1bbf2b..e01023c0 100644
--- a/FrontEnd/src/views/common/button/Button.tsx
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -33,7 +33,7 @@ export default function Button(props: ButtonProps) {
     <button
       ref={buttonRef}
       className={classNames(
-        "cru-" + (color ?? "primary"),
+        color && `cru-${color}`,
         "cru-button",
         outline && "outline",
         className,
diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/views/common/button/FlatButton.tsx
index ed01f613..15b21224 100644
--- a/FrontEnd/src/views/common/button/FlatButton.tsx
+++ b/FrontEnd/src/views/common/button/FlatButton.tsx
@@ -24,7 +24,7 @@ export default function FlatButton(props: FlatButtonProps) {
     <button
       ref={buttonRef}
       className={classNames(
-        "cru-" + (color ?? "primary"),
+        color && `cru-${color}`,
         "cru-flat-button",
         className,
       )}
diff --git a/FrontEnd/src/views/common/button/IconButton.tsx b/FrontEnd/src/views/common/button/IconButton.tsx
index ac746a7b..2d7e86e5 100644
--- a/FrontEnd/src/views/common/button/IconButton.tsx
+++ b/FrontEnd/src/views/common/button/IconButton.tsx
@@ -20,11 +20,7 @@ export default function IconButton(props: IconButtonProps) {
         "cru-icon-button",
         large && "large",
         "bi-" + icon,
-        color === "on-surface"
-          ? "on-surface"
-          : color != null
-          ? "cru-" + color
-          : "cru-primary",
+        color && (color === "on-surface" ? "on-surface" : `cru-${color}`),
         className,
       )}
       {...otherProps}
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx
index bfa5b6b8..441abbbd 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.tsx
+++ b/FrontEnd/src/views/common/button/LoadingButton.tsx
@@ -26,7 +26,8 @@ export default function LoadingButton(props: LoadingButtonProps) {
     <button
       disabled={disabled || loading}
       className={classNames(
-        `cru-${color ?? "primary"} cru-button outline cru-loading-button`,
+        color && `cru-${color}`,
+        "cru-button outline cru-loading-button",
         className,
       )}
       {...otherProps}