From b158eddbcbbad4696927898a8b90e2d34d4df202 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sat, 7 Mar 2026 22:53:20 -0500
Subject: [PATCH] refactor: adopt shared Button component in 18 modal
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace raw <button> elements with <Button> from ui/Button.tsx:
- Primary buttons (bg-gradient-brand) → <Button variant="primary">
- Secondary buttons (border-border) → <Button variant="secondary">
- Ghost buttons → <Button variant="ghost">
- Loading states use loading prop instead of manual Loader2 spinner

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/admin/CreateCategoryModal.tsx  | 23 +++++------
 .../components/admin/EditCategoryModal.tsx    | 23 +++++------
 .../components/library/ExportFlowModal.tsx    | 17 ++++-----
 .../components/library/FolderEditModal.tsx    | 20 ++++------
 frontend/src/components/library/ForkModal.tsx | 17 +++++----
 .../components/library/ImportFlowModal.tsx    | 25 ++++++------
 .../src/components/library/ShareTreeModal.tsx | 24 ++++--------
 .../components/procedural/IntakeFormModal.tsx | 14 +++----
 .../src/components/session/ForkTreeModal.tsx  | 38 ++++++-------------
 .../session/SaveSessionAsTreeModal.tsx        | 22 ++++-------
 .../session/SessionOutcomeModal.tsx           | 22 ++++-------
 .../components/session/ShareSessionModal.tsx  | 25 +++++-------
 .../components/session/StepRatingModal.tsx    | 22 ++++-------
 .../session/VariablePromptModal.tsx           | 19 ++++------
 .../step-library/StepDetailModal.tsx          | 17 ++++-----
 .../src/components/step-library/StepForm.tsx  | 18 +++++----
 .../tree-editor/AIFixReviewModal.tsx          | 28 ++++++--------
 .../tree-editor/NodeEditorModal.tsx           | 12 +++---
 18 files changed, 155 insertions(+), 231 deletions(-)

diff --git a/frontend/src/components/admin/CreateCategoryModal.tsx b/frontend/src/components/admin/CreateCategoryModal.tsx
index 4c2f5e33..752d0ce5 100644
--- a/frontend/src/components/admin/CreateCategoryModal.tsx
+++ b/frontend/src/components/admin/CreateCategoryModal.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { cn } from '@/lib/utils'
 import { Modal } from '@/components/common/Modal'
+import { Button } from '@/components/ui/Button'
 
 interface CreateCategoryModalProps {
   isOpen: boolean
@@ -62,28 +63,22 @@ export function CreateCategoryModal({
       size="sm"
       footer={
         <div className="flex justify-end gap-2">
-          <button
+          <Button
             type="button"
+            variant="secondary"
             onClick={handleClose}
             disabled={isSaving}
-            className={cn(
-              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
-              'hover:bg-accent hover:text-foreground disabled:opacity-50'
-            )}
           >
             Cancel
-          </button>
-          <button
+          </Button>
+          <Button
             type="submit"
             form="create-category-form"
-            disabled={isSaving || !name.trim()}
-            className={cn(
-              'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
-              'hover:opacity-90 disabled:opacity-50'
-            )}
+            disabled={!name.trim()}
+            loading={isSaving}
           >
-            {isSaving ? 'Creating...' : 'Create Category'}
-          </button>
+            Create Category
+          </Button>
         </div>
       }
     >
diff --git a/frontend/src/components/admin/EditCategoryModal.tsx b/frontend/src/components/admin/EditCategoryModal.tsx
index c51d6f0c..fb586940 100644
--- a/frontend/src/components/admin/EditCategoryModal.tsx
+++ b/frontend/src/components/admin/EditCategoryModal.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { cn } from '@/lib/utils'
 import type { StepCategoryListItem } from '@/types'
 import { Modal } from '@/components/common/Modal'
+import { Button } from '@/components/ui/Button'
 
 interface EditCategoryModalProps {
   isOpen: boolean
@@ -74,28 +75,22 @@ export function EditCategoryModal({
       size="sm"
       footer={
         <div className="flex justify-end gap-2">
-          <button
+          <Button
             type="button"
+            variant="secondary"
             onClick={handleClose}
             disabled={isSaving}
-            className={cn(
-              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
-              'hover:bg-accent hover:text-foreground disabled:opacity-50'
-            )}
           >
             Cancel
-          </button>
-          <button
+          </Button>
+          <Button
             type="submit"
             form="edit-category-form"
-            disabled={isSaving || !name.trim()}
-            className={cn(
-              'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
-              'hover:opacity-90 disabled:opacity-50'
-            )}
+            disabled={!name.trim()}
+            loading={isSaving}
           >
-            {isSaving ? 'Saving...' : 'Save Changes'}
-          </button>
+            Save Changes
+          </Button>
         </div>
       }
     >
diff --git a/frontend/src/components/library/ExportFlowModal.tsx b/frontend/src/components/library/ExportFlowModal.tsx
index 5d044dce..e241491c 100644
--- a/frontend/src/components/library/ExportFlowModal.tsx
+++ b/frontend/src/components/library/ExportFlowModal.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import { Download, X } from 'lucide-react'
 import { flowTransferApi } from '@/api/flowTransfer'
 import { toast } from '@/lib/toast'
+import { Button } from '@/components/ui/Button'
 
 interface ExportFlowModalProps {
   treeId: string
@@ -79,20 +80,16 @@ export function ExportFlowModal({ treeId, treeName, onClose }: ExportFlowModalPr
 
         {/* Footer */}
         <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
-          <button
-            onClick={onClose}
-            className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
-          >
+          <Button variant="secondary" onClick={onClose}>
             Cancel
-          </button>
-          <button
+          </Button>
+          <Button
             onClick={handleExport}
-            disabled={isExporting}
-            className="bg-gradient-brand flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
+            loading={isExporting}
           >
             <Download className="h-4 w-4" />
-            {isExporting ? 'Exporting…' : 'Download .rfflow'}
-          </button>
+            Download .rfflow
+          </Button>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/library/FolderEditModal.tsx b/frontend/src/components/library/FolderEditModal.tsx
index 63b8415c..25a3c596 100644
--- a/frontend/src/components/library/FolderEditModal.tsx
+++ b/frontend/src/components/library/FolderEditModal.tsx
@@ -4,6 +4,7 @@ import { foldersApi } from '@/api/folders'
 import type { FolderListItem, FolderCreate, FolderUpdate } from '@/types'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
+import { Button } from '@/components/ui/Button'
 
 // Predefined color options
 const FOLDER_COLORS = [
@@ -259,24 +260,19 @@ export function FolderEditModal({
 
           {/* Actions */}
           <div className="flex justify-end gap-3">
-            <button
+            <Button
               type="button"
+              variant="secondary"
               onClick={onClose}
-              className={cn('rounded-md border border-border px-4 py-2 text-sm text-muted-foreground', 'hover:bg-accent hover:text-foreground')}
             >
               Cancel
-            </button>
-            <button
+            </Button>
+            <Button
               type="submit"
-              disabled={isSubmitting}
-              className={cn(
-                'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                'hover:opacity-90',
-                'disabled:opacity-50'
-              )}
+              loading={isSubmitting}
             >
-              {isSubmitting ? 'Saving...' : isEditMode ? 'Save Changes' : 'Create Folder'}
-            </button>
+              {isEditMode ? 'Save Changes' : 'Create Folder'}
+            </Button>
           </div>
         </form>
       </div>
diff --git a/frontend/src/components/library/ForkModal.tsx b/frontend/src/components/library/ForkModal.tsx
index c56b532e..7e7f1f31 100644
--- a/frontend/src/components/library/ForkModal.tsx
+++ b/frontend/src/components/library/ForkModal.tsx
@@ -4,6 +4,7 @@ import { treesApi } from '@/api/trees'
 import { toast } from '@/lib/toast'
 import { cn } from '@/lib/utils'
 import { useNavigate } from 'react-router-dom'
+import { Button } from '@/components/ui/Button'
 
 interface ForkModalProps {
   treeId: string
@@ -116,20 +117,20 @@ export function ForkModal({ treeId, treeName, onClose }: ForkModalProps) {
 
           {/* Footer */}
           <div className="flex justify-end gap-2 pt-1">
-            <button
+            <Button
               type="button"
+              variant="secondary"
               onClick={onClose}
-              className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               Cancel
-            </button>
-            <button
+            </Button>
+            <Button
               type="submit"
-              disabled={isSubmitting || !name.trim()}
-              className="bg-gradient-brand flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
+              disabled={!name.trim()}
+              loading={isSubmitting}
             >
-              {isSubmitting ? 'Forking…' : 'Fork Flow'}
-            </button>
+              Fork Flow
+            </Button>
           </div>
         </form>
       </div>
diff --git a/frontend/src/components/library/ImportFlowModal.tsx b/frontend/src/components/library/ImportFlowModal.tsx
index ec44fe46..45f6aad0 100644
--- a/frontend/src/components/library/ImportFlowModal.tsx
+++ b/frontend/src/components/library/ImportFlowModal.tsx
@@ -7,6 +7,7 @@ import { toast } from '@/lib/toast'
 import { cn } from '@/lib/utils'
 import { useNavigate } from 'react-router-dom'
 import { getTreeEditorPath } from '@/lib/routing'
+import { Button } from '@/components/ui/Button'
 
 interface ImportFlowModalProps {
   onClose: () => void
@@ -227,28 +228,26 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
         {/* Footer */}
         <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
           {step === 'preview' && (
-            <button
+            <Button
+              variant="secondary"
               onClick={() => { setStep('pick'); setParsed(null); setParseError(null) }}
-              className="mr-auto rounded-lg border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+              className="mr-auto"
             >
               Back
-            </button>
+            </Button>
           )}
-          <button
-            onClick={onClose}
-            className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
-          >
+          <Button variant="secondary" onClick={onClose}>
             Cancel
-          </button>
+          </Button>
           {step === 'preview' && (
-            <button
+            <Button
               onClick={handleImport}
-              disabled={isImporting || !nameOverride.trim()}
-              className="bg-gradient-brand flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
+              disabled={!nameOverride.trim()}
+              loading={isImporting}
             >
               <FileUp className="h-4 w-4" />
-              {isImporting ? 'Importing…' : 'Import as Draft'}
-            </button>
+              Import as Draft
+            </Button>
           )}
         </div>
       </div>
diff --git a/frontend/src/components/library/ShareTreeModal.tsx b/frontend/src/components/library/ShareTreeModal.tsx
index 3fab9b62..cc97b08f 100644
--- a/frontend/src/components/library/ShareTreeModal.tsx
+++ b/frontend/src/components/library/ShareTreeModal.tsx
@@ -4,6 +4,7 @@ import type { TreeListItem, TreeShare, TreeVisibility } from '@/types'
 import { treesApi } from '@/api/trees'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
+import { Button } from '@/components/ui/Button'
 
 interface ShareTreeModalProps {
   tree: TreeListItem
@@ -201,16 +202,13 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
 
               {/* Generate Button */}
               {!activeShare && (
-                <button
+                <Button
                   onClick={handleGenerateLink}
-                  disabled={isGenerating}
-                  className={cn(
-                    'w-full rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                    'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
-                  )}
+                  loading={isGenerating}
+                  className="w-full"
                 >
-                  {isGenerating ? 'Generating...' : 'Generate Share Link'}
-                </button>
+                  Generate Share Link
+                </Button>
               )}
 
               {/* Active Share Link */}
@@ -263,15 +261,9 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
 
         {/* Footer */}
         <div className="flex justify-end gap-3 border-t border-border px-6 py-4">
-          <button
-            onClick={onClose}
-            className={cn(
-              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
-              'hover:bg-accent hover:text-foreground'
-            )}
-          >
+          <Button variant="secondary" onClick={onClose}>
             Close
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/procedural/IntakeFormModal.tsx b/frontend/src/components/procedural/IntakeFormModal.tsx
index d3b09355..19fae7ff 100644
--- a/frontend/src/components/procedural/IntakeFormModal.tsx
+++ b/frontend/src/components/procedural/IntakeFormModal.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import type { IntakeFormField } from '@/types'
 import { PasswordInput } from '@/components/common/PasswordInput'
 import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/Button'
 
 interface IntakeFormModalProps {
   isOpen: boolean
@@ -240,19 +241,16 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
 
           {/* Footer */}
           <div className="flex items-center justify-end gap-2 border-t border-border px-6 py-4">
-            <button
+            <Button
               type="button"
+              variant="secondary"
               onClick={onCancel}
-              className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               Cancel
-            </button>
-            <button
-              type="submit"
-              className="rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
-            >
+            </Button>
+            <Button type="submit">
               Start Procedure
-            </button>
+            </Button>
           </div>
         </form>
       </div>
diff --git a/frontend/src/components/session/ForkTreeModal.tsx b/frontend/src/components/session/ForkTreeModal.tsx
index 34a1d210..a5dba031 100644
--- a/frontend/src/components/session/ForkTreeModal.tsx
+++ b/frontend/src/components/session/ForkTreeModal.tsx
@@ -1,7 +1,8 @@
 import { useState } from 'react'
 import { Modal } from '@/components/common/Modal'
-import { GitFork, Loader2 } from 'lucide-react'
+import { GitFork } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/Button'
 
 interface ForkTreeModalProps {
   isOpen: boolean
@@ -44,38 +45,21 @@ export function ForkTreeModal({
 
   const footer = (
     <div className="flex justify-end gap-3">
-      <button
+      <Button
+        variant="ghost"
         onClick={onSkip}
         disabled={isSaving}
-        className={cn(
-          'rounded-md px-4 py-2 text-sm font-medium transition-colors',
-          'text-muted-foreground hover:bg-accent hover:text-foreground',
-          'disabled:cursor-not-allowed disabled:opacity-50'
-        )}
       >
         Skip
-      </button>
-      <button
+      </Button>
+      <Button
         onClick={handleFork}
-        disabled={isSaving || !name.trim()}
-        className={cn(
-          'flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium transition-colors',
-          'hover:opacity-90',
-          'disabled:cursor-not-allowed disabled:opacity-50'
-        )}
+        disabled={!name.trim()}
+        loading={isSaving}
       >
-        {isSaving ? (
-          <>
-            <Loader2 className="h-4 w-4 animate-spin" />
-            Saving...
-          </>
-        ) : (
-          <>
-            <GitFork className="h-4 w-4" />
-            Save as Personal Tree
-          </>
-        )}
-      </button>
+        <GitFork className="h-4 w-4" />
+        Save as Personal Tree
+      </Button>
     </div>
   )
 
diff --git a/frontend/src/components/session/SaveSessionAsTreeModal.tsx b/frontend/src/components/session/SaveSessionAsTreeModal.tsx
index aceaa836..11f5635b 100644
--- a/frontend/src/components/session/SaveSessionAsTreeModal.tsx
+++ b/frontend/src/components/session/SaveSessionAsTreeModal.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { X } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/Button'
 
 interface SaveSessionAsTreeModalProps {
   isOpen: boolean
@@ -130,27 +131,20 @@ export function SaveSessionAsTreeModal({
 
           {/* Actions */}
           <div className="flex justify-end gap-2 pt-2">
-            <button
+            <Button
               type="button"
+              variant="secondary"
               onClick={onClose}
               disabled={isSaving}
-              className={cn(
-                'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
-                'hover:bg-accent hover:text-foreground disabled:opacity-50'
-              )}
             >
               Cancel
-            </button>
-            <button
+            </Button>
+            <Button
               type="submit"
-              disabled={isSaving}
-              className={cn(
-                'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                'hover:opacity-90 disabled:opacity-50'
-              )}
+              loading={isSaving}
             >
-              {isSaving ? 'Saving...' : 'Save as Tree'}
-            </button>
+              Save as Tree
+            </Button>
           </div>
         </form>
       </div>
diff --git a/frontend/src/components/session/SessionOutcomeModal.tsx b/frontend/src/components/session/SessionOutcomeModal.tsx
index ac5e1f31..b011444e 100644
--- a/frontend/src/components/session/SessionOutcomeModal.tsx
+++ b/frontend/src/components/session/SessionOutcomeModal.tsx
@@ -2,6 +2,7 @@ import { useRef } from 'react'
 import { Modal } from '@/components/common/Modal'
 import { cn } from '@/lib/utils'
 import type { SessionOutcome } from '@/types'
+import { Button } from '@/components/ui/Button'
 
 interface SessionOutcomeModalProps {
   isOpen: boolean
@@ -46,28 +47,21 @@ export function SessionOutcomeModal({
       title="Session Outcome"
       footer={(
         <div className="flex justify-end gap-2">
-          <button
+          <Button
             type="button"
+            variant="secondary"
             onClick={onClose}
             disabled={isSubmitting}
-            className={cn(
-              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
-              'hover:bg-accent hover:text-foreground disabled:opacity-50'
-            )}
           >
             Cancel
-          </button>
-          <button
+          </Button>
+          <Button
             type="button"
             onClick={handleSubmit}
-            disabled={isSubmitting}
-            className={cn(
-              'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
-              'hover:opacity-90 disabled:opacity-50'
-            )}
+            loading={isSubmitting}
           >
-            {isSubmitting ? 'Completing...' : 'Complete Session'}
-          </button>
+            Complete Session
+          </Button>
         </div>
       )}
     >
diff --git a/frontend/src/components/session/ShareSessionModal.tsx b/frontend/src/components/session/ShareSessionModal.tsx
index 338875b3..d3ebd42b 100644
--- a/frontend/src/components/session/ShareSessionModal.tsx
+++ b/frontend/src/components/session/ShareSessionModal.tsx
@@ -7,6 +7,7 @@ import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
 import { Spinner } from '@/components/common/Spinner'
 import { Modal } from '@/components/common/Modal'
+import { Button } from '@/components/ui/Button'
 
 interface ShareSessionModalProps {
   sessionId: string
@@ -180,15 +181,9 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
       size="lg"
       footer={
         <div className="flex justify-end">
-          <button
-            onClick={onClose}
-            className={cn(
-              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
-              'hover:bg-accent hover:text-foreground'
-            )}
-          >
+          <Button variant="secondary" onClick={onClose}>
             Close
-          </button>
+          </Button>
         </div>
       }
     >
@@ -300,17 +295,15 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
           </div>
 
           {/* Generate Button */}
-          <button
+          <Button
             onClick={handleGenerateLink}
-            disabled={isGenerating || (expirationPreset === 'custom' && !customDatetime)}
-            className={cn(
-              'flex w-full items-center justify-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-              'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
-            )}
+            disabled={expirationPreset === 'custom' && !customDatetime}
+            loading={isGenerating}
+            className="w-full"
           >
             <Link2 className="h-4 w-4" />
-            {isGenerating ? 'Generating...' : 'Generate Link'}
-          </button>
+            Generate Link
+          </Button>
         </div>
 
         {/* Existing Shares */}
diff --git a/frontend/src/components/session/StepRatingModal.tsx b/frontend/src/components/session/StepRatingModal.tsx
index 1d1b604f..06966d72 100644
--- a/frontend/src/components/session/StepRatingModal.tsx
+++ b/frontend/src/components/session/StepRatingModal.tsx
@@ -3,6 +3,7 @@ import { X, ThumbsUp, ThumbsDown } from 'lucide-react'
 import { StarRating } from '@/components/common/StarRating'
 import { cn } from '@/lib/utils'
 import type { Step } from '@/types'
+import { Button } from '@/components/ui/Button'
 
 interface StepRatingData {
   rating: number
@@ -190,28 +191,21 @@ export function StepRatingModal({
 
         {/* Footer */}
         <div className="flex justify-end gap-2 border-t border-border px-6 py-4">
-          <button
+          <Button
             type="button"
+            variant="secondary"
             onClick={onClose}
             disabled={isSaving}
-            className={cn(
-              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
-              'hover:bg-accent hover:text-foreground disabled:opacity-50'
-            )}
           >
             Skip
-          </button>
-          <button
+          </Button>
+          <Button
             type="button"
             onClick={handleSubmit}
-            disabled={isSaving}
-            className={cn(
-              'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-              'hover:opacity-90 disabled:opacity-50'
-            )}
+            loading={isSaving}
           >
-            {isSaving ? 'Submitting...' : 'Submit Ratings'}
-          </button>
+            Submit Ratings
+          </Button>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/session/VariablePromptModal.tsx b/frontend/src/components/session/VariablePromptModal.tsx
index 9182b9aa..8467548b 100644
--- a/frontend/src/components/session/VariablePromptModal.tsx
+++ b/frontend/src/components/session/VariablePromptModal.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/Button'
 
 interface VariablePromptModalProps {
   /** The prompt text from [USER_INPUT:prompt] */
@@ -45,26 +46,20 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
           />
 
           <div className="mt-4 flex gap-2">
-            <button
+            <Button
               type="submit"
               disabled={!value.trim()}
-              className={cn(
-                'flex-1 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
-              )}
+              className="flex-1"
             >
               Continue
-            </button>
-            <button
+            </Button>
+            <Button
               type="button"
+              variant="secondary"
               onClick={onCancel}
-              className={cn(
-                'rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
-                'hover:bg-accent hover:text-foreground'
-              )}
             >
               Skip
-            </button>
+            </Button>
           </div>
         </form>
       </div>
diff --git a/frontend/src/components/step-library/StepDetailModal.tsx b/frontend/src/components/step-library/StepDetailModal.tsx
index 56fe83c2..2b13975e 100644
--- a/frontend/src/components/step-library/StepDetailModal.tsx
+++ b/frontend/src/components/step-library/StepDetailModal.tsx
@@ -4,6 +4,7 @@ import { cn } from '@/lib/utils'
 import { MarkdownContent } from '@/components/ui/MarkdownContent'
 import { stepsApi } from '@/api/steps'
 import type { Step, Review } from '@/types/step'
+import { Button } from '@/components/ui/Button'
 
 interface StepDetailModalProps {
   stepId: string
@@ -318,22 +319,20 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
 
         {/* Footer - Actions */}
         <div className="flex gap-2 border-t border-border p-4">
-          <button
+          <Button
+            variant="secondary"
             onClick={onClose}
-            className="flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="flex-1"
           >
             Cancel
-          </button>
-          <button
+          </Button>
+          <Button
             onClick={handleInsert}
             disabled={!step}
-            className={cn(
-              'flex-1 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-              'hover:opacity-90 disabled:opacity-50'
-            )}
+            className="flex-1"
           >
             Insert Into Session
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/step-library/StepForm.tsx b/frontend/src/components/step-library/StepForm.tsx
index df73d3fa..5dc01dd9 100644
--- a/frontend/src/components/step-library/StepForm.tsx
+++ b/frontend/src/components/step-library/StepForm.tsx
@@ -3,6 +3,7 @@ import { Plus, X, HelpCircle, Zap, CheckCircle } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { stepCategoriesApi } from '@/api/stepCategories'
 import type { StepCreate, StepCategory, StepCommand } from '@/types/step'
+import { Button } from '@/components/ui/Button'
 
 interface StepFormProps {
   onSubmit: (data: StepCreate) => void
@@ -369,20 +370,21 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
 
       {/* Actions */}
       <div className="flex gap-2 pt-4">
-        <button
+        <Button
           type="button"
+          variant="secondary"
           onClick={onCancel}
-          className="flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
+          className="flex-1"
         >
           Cancel
-        </button>
-        <button
+        </Button>
+        <Button
           type="submit"
-          disabled={isSubmitting}
-          className="flex-1 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
+          loading={isSubmitting}
+          className="flex-1"
         >
-          {isSubmitting ? 'Saving...' : (submitLabel ?? 'Insert Step')}
-        </button>
+          {submitLabel ?? 'Insert Step'}
+        </Button>
       </div>
     </form>
   )
diff --git a/frontend/src/components/tree-editor/AIFixReviewModal.tsx b/frontend/src/components/tree-editor/AIFixReviewModal.tsx
index 1f3a096e..17f21a64 100644
--- a/frontend/src/components/tree-editor/AIFixReviewModal.tsx
+++ b/frontend/src/components/tree-editor/AIFixReviewModal.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { X, Check, SkipForward, Sparkles, ChevronDown, ChevronUp } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { AIFixProposal } from '@/types'
+import { Button } from '@/components/ui/Button'
 
 interface AIFixReviewModalProps {
   fixes: AIFixProposal[]
@@ -125,20 +126,21 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
 
                     {/* Action buttons */}
                     <div className="mt-3 flex gap-2">
-                      <button
+                      <Button
+                        size="sm"
                         onClick={() => handleApply(fix)}
-                        className="flex items-center gap-1 rounded-md bg-gradient-brand px-3 py-1.5 text-xs font-medium text-white shadow-xs shadow-primary/20 hover:opacity-90"
                       >
                         <Check className="h-3 w-3" />
                         Apply
-                      </button>
-                      <button
+                      </Button>
+                      <Button
+                        variant="secondary"
+                        size="sm"
                         onClick={() => handleSkip(fix)}
-                        className="flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
                       >
                         <SkipForward className="h-3 w-3" />
                         Skip
-                      </button>
+                      </Button>
                     </div>
                   </>
                 )}
@@ -149,19 +151,13 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
 
         {/* Footer */}
         <div className="flex items-center justify-between border-t border-border px-6 py-4">
-          <button
-            onClick={onClose}
-            className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
-          >
+          <Button variant="secondary" onClick={onClose}>
             {allHandled ? 'Done' : 'Cancel'}
-          </button>
+          </Button>
           {!allHandled && (
-            <button
-              onClick={onApplyAll}
-              className="rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
-            >
+            <Button onClick={onApplyAll}>
               Apply All ({pendingFixes.length})
-            </button>
+            </Button>
           )}
         </div>
       </div>
diff --git a/frontend/src/components/tree-editor/NodeEditorModal.tsx b/frontend/src/components/tree-editor/NodeEditorModal.tsx
index 96fbc31e..43312d96 100644
--- a/frontend/src/components/tree-editor/NodeEditorModal.tsx
+++ b/frontend/src/components/tree-editor/NodeEditorModal.tsx
@@ -5,6 +5,7 @@ import { NodeFormDecision } from './NodeFormDecision'
 import { NodeFormAction } from './NodeFormAction'
 import { NodeFormResolution } from './NodeFormResolution'
 import type { TreeStructure } from '@/types'
+import { Button } from '@/components/ui/Button'
 
 interface NodeEditorModalProps {
   node: TreeStructure
@@ -65,20 +66,19 @@ export function NodeEditorModal({ node, onClose, isNewNode = false }: NodeEditor
 
   const footerContent = (
     <div className="flex justify-end gap-2">
-      <button
+      <Button
         type="button"
+        variant="secondary"
         onClick={handleCancel}
-        className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
       >
         Cancel
-      </button>
-      <button
+      </Button>
+      <Button
         type="button"
         onClick={handleSave}
-        className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
       >
         Done
-      </button>
+      </Button>
     </div>
   )