apps/frontend/app/components/Form/Button.tsx

@@ -1,16 +1,20 @@
+import { Button, type ButtonProps } from '@radix-ui/themes';
+import { LoaderCircle } from 'lucide-react';
+
 export type SubmitButtonProps = {
   loading?: boolean;
   label?:
     | {
-        default: string;
-        loading: string;
+        default?: string;
+        loading?: string;
       }
     | string;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> &
+  ButtonProps;
 
 export function SubmitButton({ loading, label, ...props }: SubmitButtonProps) {
   return (
-    <button
+    <Button
       type="submit"
       disabled={loading}
       style={{
@@ -18,12 +22,18 @@ export function SubmitButton({ loading, label, ...props }: SubmitButtonProps) {
         borderRadius: 6,
         border: 'none',
         backgroundColor: 'var(--iris-9)',
-        color: 'white',
       }}
+      size="3"
       {...props}
     >
-      {loading ? (typeof label === 'string' ? 'Submitting…' : label?.loading ?? 'Submitting…') : typeof label === 'string' ? label : label?.default ?? 'Submit'}
-    </button>
+      {loading
+        ? typeof label === 'string'
+          ? label
+          : label?.loading ?? <LoaderCircle className="animate-spin" style={{ width: 24, height: 24, marginRight: 4, verticalAlign: 'middle', color: 'white' }} />
+        : typeof label === 'string'
+        ? label
+        : label?.default ?? 'Submit'}
+    </Button>
   );
 }