website refactor

apps/website/components/onboarding/OnboardingCTA.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/primitives/Stack';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 
 interface OnboardingCTAProps {
   onBack?: () => void;
@@ -23,19 +23,16 @@ export function OnboardingCTA({
   type = 'button',
 }: OnboardingCTAProps) {
   return (
-    <Stack direction="row" justify="between" mt={8} gap={4}>
-      {onBack ? (
+    <ButtonGroup alignment={onBack ? 'between' : 'end'} marginTop={8}>
+      {onBack && (
         <Button
           type="button"
           variant="secondary"
           onClick={onBack}
           disabled={isLoading}
-          className="px-8"
         >
           {backLabel}
         </Button>
-      ) : (
-        <div />
       )}
 
       <Button
@@ -43,17 +40,10 @@ export function OnboardingCTA({
         variant="primary"
         onClick={onNext}
         disabled={isLoading || !canNext}
-        className="px-8 min-w-[140px]"
+        isLoading={isLoading}
       >
-        {isLoading ? (
-          <Stack direction="row" gap={2} align="center">
-            <span className="animate-spin">⟳</span>
-            <span>Processing...</span>
-          </Stack>
-        ) : (
-          isLastStep ? 'Complete Setup' : nextLabel
-        )}
+        {isLastStep ? 'Complete Setup' : nextLabel}
       </Button>
-    </Stack>
+    </ButtonGroup>
   );
 }