Updates

components/lib/layout/Button.tsx

@@ -8,6 +8,36 @@ import {
 import { twMerge } from "tailwind-merge";
 import Loading from "../elements/Loading";
 
+export type TWUIButtonProps = DetailedHTMLProps<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+> & {
+    variant?: "normal" | "ghost" | "outlined";
+    color?:
+        | "primary"
+        | "secondary"
+        | "accent"
+        | "gray"
+        | "error"
+        | "warning"
+        | "success";
+    size?: "small" | "smaller" | "normal" | "large" | "larger";
+    loadingIconSize?: React.ComponentProps<typeof Loading>["size"];
+    href?: string;
+    target?: HTMLAttributeAnchorTarget;
+    loading?: boolean;
+    linkProps?: DetailedHTMLProps<
+        AnchorHTMLAttributes<HTMLAnchorElement>,
+        HTMLAnchorElement
+    >;
+    beforeIcon?: React.ReactNode;
+    afterIcon?: React.ReactNode;
+    buttonContentProps?: DetailedHTMLProps<
+        HTMLAttributes<HTMLDivElement>,
+        HTMLDivElement
+    >;
+};
+
 /**
  * # Buttons
  * @className twui-button-general
@@ -36,35 +66,9 @@ export default function Button({
     beforeIcon,
     afterIcon,
     loading,
+    loadingIconSize,
     ...props
-}: DetailedHTMLProps<
-    ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-> & {
-    variant?: "normal" | "ghost" | "outlined";
-    color?:
-        | "primary"
-        | "secondary"
-        | "accent"
-        | "gray"
-        | "error"
-        | "warning"
-        | "success";
-    size?: "small" | "smaller" | "normal" | "large" | "larger";
-    href?: string;
-    target?: HTMLAttributeAnchorTarget;
-    loading?: boolean;
-    linkProps?: DetailedHTMLProps<
-        AnchorHTMLAttributes<HTMLAnchorElement>,
-        HTMLAnchorElement
-    >;
-    beforeIcon?: React.ReactNode;
-    afterIcon?: React.ReactNode;
-    buttonContentProps?: DetailedHTMLProps<
-        HTMLAttributes<HTMLDivElement>,
-        HTMLDivElement
-    >;
-}) {
+}: TWUIButtonProps) {
     const finalClassName: string = (() => {
         if (variant == "normal" || !variant) {
             if (color == "primary" || !color)
@@ -194,6 +198,7 @@ export default function Button({
                 <Loading
                     className="absolute"
                     size={(() => {
+                        if (loadingIconSize) return loadingIconSize;
                         switch (size) {
                             case "small":
                                 return "small";