add button link for customized Link looking like a Button

frontend/src/components/basics/Button.tsx

@@ -4,31 +4,38 @@ type ButtonProps = {
     onClick: () => void,
     icon?: Icon,
     text?: string,
-    buttonType? : ButtonType
+    buttonType?: ButtonType
+    className?: string
 }
 
 export const ButtonType = {
-  DarkButton: {
-    textColor: "dark-button-text",
-    backgroundColor: "dark-button-bg"
-  },
-  PrimaryButton: {
-    textColor: "primary-button-text",
-    backgroundColor: "primary-button-bg"
-  },
-  DefaultButton: {
-    textColor: "default-button-text",
-    backgroundColor: "default-button-bg"
-  }
+    DarkButton: {
+        textColor: "dark-button-text",
+        backgroundColor: "dark-button-bg"
+    },
+    PrimaryButton: {
+        textColor: "primary-button-text",
+        backgroundColor: "primary-button-bg"
+    },
+    DefaultButton: {
+        textColor: "default-button-text",
+        backgroundColor: "default-button-bg"
+    }
 } as const;
 
 export type ButtonType = typeof ButtonType[keyof typeof ButtonType];
 
-export default function Button ({onClick: onClick, icon, text, buttonType = ButtonType.DefaultButton} : ButtonProps){
-    return(
+export default function Button(
+    { 
+        onClick: onClick, 
+        icon, text, 
+        buttonType = ButtonType.DefaultButton, 
+        className = "" 
+    }: ButtonProps) {
+    return (
         <button
             type="button"
-            className={`basic-button ${buttonType.backgroundColor} ${buttonType.textColor}`}
+            className={`basic-button ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
             onClick={onClick}
         >
             <div className="flex items-center gap-2">