From d7cdcd26e393e319dbf331b4a15c52ff67c2b125 Mon Sep 17 00:00:00 2001
From: Matthew Birtch <2040554+matthewbirtch@users.noreply.github.com>
Date: Wed, 7 Oct 2026 18:50:26 +0200
Subject: [PATCH] Use Compass button loading spinner and migrate settings
 Cancel buttons

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../__snapshots__/save_button.test.tsx.snap   |  58 ++-
 .../setting_item_max.test.tsx.snap            | 185 +++++----
 .../setting_picture.test.tsx.snap             | 353 ++++++++++++------
 .../spinner_button.test.tsx.snap              |  23 +-
 .../attribute_details/graph/draft_forms.tsx   |   2 +-
 .../license_settings.test.tsx.snap            | 159 ++++----
 .../modals/upload_license_modal.tsx           |  13 +-
 .../team_edition/team_edition_right_panel.tsx |  33 +-
 .../trial_banner/trial_banner.tsx             |  14 +-
 .../request_button/request_button.tsx         |  25 +-
 .../edit_incoming_webhook.test.tsx.snap       |  46 +--
 .../channels/src/components/save_button.tsx   |  10 +-
 .../src/components/setting_item_max.tsx       |  24 +-
 .../src/components/setting_picture.tsx        |  49 +--
 .../src/components/spinner_button.tsx         |  19 +-
 .../join_leave_section.test.tsx.snap          |  41 +-
 .../user_settings_display.test.tsx.snap       | 246 +++++++-----
 .../render_emoticons_as_emoji.test.tsx.snap   |  41 +-
 .../__snapshots__/index.test.tsx.snap         |  82 ++--
 .../email_notification_setting.test.tsx.snap  | 226 ++++++-----
 .../manage_auto_responder.test.tsx.snap       |  82 ++--
 .../user_settings_security.test.tsx.snap      |  16 +-
 .../__snapshots__/mfa_section.test.tsx.snap   |  63 +++-
 .../src/sass/components/_save-button.scss     |   6 +
 24 files changed, 1080 insertions(+), 736 deletions(-)

diff --git a/webapp/channels/src/components/__snapshots__/save_button.test.tsx.snap b/webapp/channels/src/components/__snapshots__/save_button.test.tsx.snap
index 4cf12dba2a0..1005d832ed8 100644
--- a/webapp/channels/src/components/__snapshots__/save_button.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/save_button.test.tsx.snap
@@ -11,9 +11,7 @@ exports[`components/SaveButton should match snapshot, extraClasses 1`] = `
     <span
       class="_button__label_doayp_24"
     >
-      <span>
-        Save
-      </span>
+      Save
     </span>
   </button>
 </div>
@@ -30,9 +28,7 @@ exports[`components/SaveButton should match snapshot, on defaultMessage 1`] = `
     <span
       class="_button__label_doayp_24"
     >
-      <span>
-        Save
-      </span>
+      Save
     </span>
   </button>
 </div>
@@ -49,9 +45,7 @@ exports[`components/SaveButton should match snapshot, on defaultMessage 2`] = `
     <span
       class="_button__label_doayp_24"
     >
-      <span>
-        Go
-      </span>
+      Go
     </span>
   </button>
 </div>
@@ -67,19 +61,20 @@ exports[`components/SaveButton should match snapshot, on savingMessage 1`] = `
     type="submit"
   >
     <span
-      class="_button__label_doayp_24"
+      aria-hidden="true"
+      class="_button__icon-slot_doayp_27"
     >
       <span
-        class="LoadingSpinner with-text"
-        data-testid="loadingSpinner"
-        id="loadingSpinner"
-      >
-        <span
-          class="fa fa-spinner fa-fw fa-pulse spinner"
-          title="Loading Icon"
-        />
-        Saving
-      </span>
+        aria-label="Loading"
+        class="_spinner_3elm7_10"
+        role="status"
+        style="width: 16px; height: 16px; --spinner-stroke-width: 2px;"
+      />
+    </span>
+    <span
+      class="_button__label_doayp_24"
+    >
+      Saving
     </span>
   </button>
 </div>
@@ -95,19 +90,20 @@ exports[`components/SaveButton should match snapshot, on savingMessage 2`] = `
     type="submit"
   >
     <span
-      class="_button__label_doayp_24"
+      aria-hidden="true"
+      class="_button__icon-slot_doayp_27"
     >
       <span
-        class="LoadingSpinner with-text"
-        data-testid="loadingSpinner"
-        id="loadingSpinner"
-      >
-        <span
-          class="fa fa-spinner fa-fw fa-pulse spinner"
-          title="Loading Icon"
-        />
-        Saving Config...
-      </span>
+        aria-label="Loading"
+        class="_spinner_3elm7_10"
+        role="status"
+        style="width: 16px; height: 16px; --spinner-stroke-width: 2px;"
+      />
+    </span>
+    <span
+      class="_button__label_doayp_24"
+    >
+      Saving Config...
     </span>
   </button>
 </div>
diff --git a/webapp/channels/src/components/__snapshots__/setting_item_max.test.tsx.snap b/webapp/channels/src/components/__snapshots__/setting_item_max.test.tsx.snap
index 03d0a81c9d7..cf08d743c1d 100644
--- a/webapp/channels/src/components/__snapshots__/setting_item_max.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/setting_item_max.test.tsx.snap
@@ -30,27 +30,34 @@ exports[`components/SettingItemMax should match snapshot 1`] = `
           <div
             role="alert"
           />
-          <button
-            class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span
-              class="_button__label_doayp_24"
+            <button
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
             >
-              <span>
+              <span
+                class="_button__label_doayp_24"
+              >
                 Save
               </span>
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -88,27 +95,34 @@ exports[`components/SettingItemMax should match snapshot, on clientError 1`] = `
           <div
             role="alert"
           />
-          <button
-            class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span
-              class="_button__label_doayp_24"
+            <button
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
             >
-              <span>
+              <span
+                class="_button__label_doayp_24"
+              >
                 Save
               </span>
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -169,27 +183,34 @@ exports[`components/SettingItemMax should match snapshot, on serverError 1`] = `
               </label>
             </div>
           </div>
-          <button
-            class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span
-              class="_button__label_doayp_24"
+            <button
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
             >
-              <span>
+              <span
+                class="_button__label_doayp_24"
+              >
                 Save
               </span>
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -227,27 +248,34 @@ exports[`components/SettingItemMax should match snapshot, with new saveTextButto
           <div
             role="alert"
           />
-          <button
-            class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span
-              class="_button__label_doayp_24"
+            <button
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
             >
-              <span>
+              <span
+                class="_button__label_doayp_24"
+              >
                 CustomText
               </span>
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -285,13 +313,22 @@ exports[`components/SettingItemMax should match snapshot, without submit 1`] = `
           <div
             role="alert"
           />
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
+          <div
+            class="setting-list-item__buttons"
           >
-            Cancel
-          </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap b/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap
index 8d3751ae01a..b570c10ea2c 100644
--- a/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap
@@ -39,7 +39,9 @@ exports[`components/SettingItemMin should match snapshot with active Save button
           class="setting-list-item"
         >
           <hr />
-          <span>
+          <div
+            class="setting-list-item__buttons"
+          >
             <input
               accept=".jpeg,.jpg,.png,.bmp"
               aria-hidden="true"
@@ -50,27 +52,42 @@ exports[`components/SettingItemMin should match snapshot with active Save button
             />
             <button
               aria-label="Select"
-              class="btn btn-primary btn-file"
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47 btn-file"
               data-testid="inputSettingPictureButton"
+              type="button"
             >
-              Select
+              <span
+                class="_button__label_doayp_24"
+              >
+                Select
+              </span>
             </button>
             <button
               aria-label="Save"
-              class="btn btn-primary"
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
               data-testid="saveSettingPicture"
               tabindex="0"
+              type="button"
             >
-              Save
+              <span
+                class="_button__label_doayp_24"
+              >
+                Save
+              </span>
             </button>
-          </span>
-          <button
-            aria-label="Cancel"
-            class="btn btn-tertiary ml-2"
-            data-testid="cancelSettingPicture"
-          >
-            Cancel
-          </button>
+            <button
+              aria-label="Cancel"
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelSettingPicture"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -107,7 +124,9 @@ exports[`components/SettingItemMin should match snapshot with removeSrc state ac
           class="setting-list-item"
         >
           <hr />
-          <span>
+          <div
+            class="setting-list-item__buttons"
+          >
             <input
               accept=".jpeg,.jpg,.png,.bmp"
               aria-hidden="true"
@@ -118,27 +137,42 @@ exports[`components/SettingItemMin should match snapshot with removeSrc state ac
             />
             <button
               aria-label="Select"
-              class="btn btn-primary btn-file"
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47 btn-file"
               data-testid="inputSettingPictureButton"
+              type="button"
             >
-              Select
+              <span
+                class="_button__label_doayp_24"
+              >
+                Select
+              </span>
             </button>
             <button
               aria-label="Save"
-              class="btn btn-primary"
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
               data-testid="saveSettingPicture"
               tabindex="0"
+              type="button"
             >
-              Save
+              <span
+                class="_button__label_doayp_24"
+              >
+                Save
+              </span>
             </button>
-          </span>
-          <button
-            aria-label="Cancel"
-            class="btn btn-tertiary ml-2"
-            data-testid="cancelSettingPicture"
-          >
-            Cancel
-          </button>
+            <button
+              aria-label="Cancel"
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelSettingPicture"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -185,7 +219,9 @@ exports[`components/SettingItemMin should match snapshot, on loading picture 1`]
           class="setting-list-item"
         >
           <hr />
-          <span>
+          <div
+            class="setting-list-item__buttons"
+          >
             <input
               accept=".jpeg,.jpg,.png,.bmp"
               aria-hidden="true"
@@ -197,39 +233,55 @@ exports[`components/SettingItemMin should match snapshot, on loading picture 1`]
             />
             <button
               aria-label="Select"
-              class="btn btn-primary btn-file"
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47 btn-file"
               data-testid="inputSettingPictureButton"
               disabled=""
+              type="button"
             >
-              Select
+              <span
+                class="_button__label_doayp_24"
+              >
+                Select
+              </span>
             </button>
             <button
               aria-label="Uploading..."
-              class="btn btn-primary"
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
               data-testid="saveSettingPicture"
               disabled=""
               tabindex="-1"
+              type="button"
             >
               <span
-                class="LoadingSpinner with-text"
-                data-testid="loadingSpinner"
-                id="loadingSpinner"
+                aria-hidden="true"
+                class="_button__icon-slot_doayp_27"
               >
                 <span
-                  class="fa fa-spinner fa-fw fa-pulse spinner"
-                  title="Loading Icon"
+                  aria-label="Loading"
+                  class="_spinner_3elm7_10"
+                  role="status"
+                  style="width: 16px; height: 16px; --spinner-stroke-width: 2px;"
                 />
+              </span>
+              <span
+                class="_button__label_doayp_24"
+              >
                 Uploading...
               </span>
             </button>
-          </span>
-          <button
-            aria-label="Cancel"
-            class="btn btn-tertiary ml-2"
-            data-testid="cancelSettingPicture"
-          >
-            Cancel
-          </button>
+            <button
+              aria-label="Cancel"
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelSettingPicture"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -283,7 +335,9 @@ exports[`components/SettingItemMin should match snapshot, profile picture on fil
           class="setting-list-item"
         >
           <hr />
-          <span>
+          <div
+            class="setting-list-item__buttons"
+          >
             <input
               accept=".jpeg,.jpg,.png,.bmp"
               aria-hidden="true"
@@ -294,28 +348,43 @@ exports[`components/SettingItemMin should match snapshot, profile picture on fil
             />
             <button
               aria-label="Select"
-              class="btn btn-primary btn-file"
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47 btn-file"
               data-testid="inputSettingPictureButton"
+              type="button"
             >
-              Select
+              <span
+                class="_button__label_doayp_24"
+              >
+                Select
+              </span>
             </button>
             <button
               aria-label="Save"
-              class="btn btn-primary"
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
               data-testid="saveSettingPicture"
               disabled=""
               tabindex="-1"
+              type="button"
             >
-              Save
+              <span
+                class="_button__label_doayp_24"
+              >
+                Save
+              </span>
             </button>
-          </span>
-          <button
-            aria-label="Cancel"
-            class="btn btn-tertiary ml-2"
-            data-testid="cancelSettingPicture"
-          >
-            Cancel
-          </button>
+            <button
+              aria-label="Cancel"
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelSettingPicture"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -362,7 +431,9 @@ exports[`components/SettingItemMin should match snapshot, profile picture on sou
           class="setting-list-item"
         >
           <hr />
-          <span>
+          <div
+            class="setting-list-item__buttons"
+          >
             <input
               accept=".jpeg,.jpg,.png,.bmp"
               aria-hidden="true"
@@ -373,28 +444,43 @@ exports[`components/SettingItemMin should match snapshot, profile picture on sou
             />
             <button
               aria-label="Select"
-              class="btn btn-primary btn-file"
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47 btn-file"
               data-testid="inputSettingPictureButton"
+              type="button"
             >
-              Select
+              <span
+                class="_button__label_doayp_24"
+              >
+                Select
+              </span>
             </button>
             <button
               aria-label="Save"
-              class="btn btn-primary"
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
               data-testid="saveSettingPicture"
               disabled=""
               tabindex="-1"
+              type="button"
             >
-              Save
+              <span
+                class="_button__label_doayp_24"
+              >
+                Save
+              </span>
             </button>
-          </span>
-          <button
-            aria-label="Cancel"
-            class="btn btn-tertiary ml-2"
-            data-testid="cancelSettingPicture"
-          >
-            Cancel
-          </button>
+            <button
+              aria-label="Cancel"
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelSettingPicture"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -448,7 +534,9 @@ exports[`components/SettingItemMin should match snapshot, team icon on file 1`]
           class="setting-list-item"
         >
           <hr />
-          <span>
+          <div
+            class="setting-list-item__buttons"
+          >
             <input
               accept=".jpeg,.jpg,.png,.bmp"
               aria-hidden="true"
@@ -459,28 +547,43 @@ exports[`components/SettingItemMin should match snapshot, team icon on file 1`]
             />
             <button
               aria-label="Select"
-              class="btn btn-primary btn-file"
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47 btn-file"
               data-testid="inputSettingPictureButton"
+              type="button"
             >
-              Select
+              <span
+                class="_button__label_doayp_24"
+              >
+                Select
+              </span>
             </button>
             <button
               aria-label="Save"
-              class="btn btn-primary"
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
               data-testid="saveSettingPicture"
               disabled=""
               tabindex="-1"
+              type="button"
             >
-              Save
+              <span
+                class="_button__label_doayp_24"
+              >
+                Save
+              </span>
             </button>
-          </span>
-          <button
-            aria-label="Cancel"
-            class="btn btn-tertiary ml-2"
-            data-testid="cancelSettingPicture"
-          >
-            Cancel
-          </button>
+            <button
+              aria-label="Cancel"
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelSettingPicture"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -551,7 +654,9 @@ exports[`components/SettingItemMin should match snapshot, team icon on source 1`
           class="setting-list-item"
         >
           <hr />
-          <span>
+          <div
+            class="setting-list-item__buttons"
+          >
             <input
               accept=".jpeg,.jpg,.png,.bmp"
               aria-hidden="true"
@@ -562,28 +667,43 @@ exports[`components/SettingItemMin should match snapshot, team icon on source 1`
             />
             <button
               aria-label="Select"
-              class="btn btn-primary btn-file"
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47 btn-file"
               data-testid="inputSettingPictureButton"
+              type="button"
             >
-              Select
+              <span
+                class="_button__label_doayp_24"
+              >
+                Select
+              </span>
             </button>
             <button
               aria-label="Save"
-              class="btn btn-primary"
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
               data-testid="saveSettingPicture"
               disabled=""
               tabindex="-1"
+              type="button"
             >
-              Save
+              <span
+                class="_button__label_doayp_24"
+              >
+                Save
+              </span>
             </button>
-          </span>
-          <button
-            aria-label="Cancel"
-            class="btn btn-tertiary ml-2"
-            data-testid="cancelSettingPicture"
-          >
-            Cancel
-          </button>
+            <button
+              aria-label="Cancel"
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelSettingPicture"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -654,7 +774,9 @@ exports[`components/SettingItemMin should match snapshot, user icon on source 1`
           class="setting-list-item"
         >
           <hr />
-          <span>
+          <div
+            class="setting-list-item__buttons"
+          >
             <input
               accept=".jpeg,.jpg,.png,.bmp"
               aria-hidden="true"
@@ -665,28 +787,43 @@ exports[`components/SettingItemMin should match snapshot, user icon on source 1`
             />
             <button
               aria-label="Select"
-              class="btn btn-primary btn-file"
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47 btn-file"
               data-testid="inputSettingPictureButton"
+              type="button"
             >
-              Select
+              <span
+                class="_button__label_doayp_24"
+              >
+                Select
+              </span>
             </button>
             <button
               aria-label="Save"
-              class="btn btn-primary"
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
               data-testid="saveSettingPicture"
               disabled=""
               tabindex="-1"
+              type="button"
             >
-              Save
+              <span
+                class="_button__label_doayp_24"
+              >
+                Save
+              </span>
             </button>
-          </span>
-          <button
-            aria-label="Cancel"
-            class="btn btn-tertiary ml-2"
-            data-testid="cancelSettingPicture"
-          >
-            Cancel
-          </button>
+            <button
+              aria-label="Cancel"
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelSettingPicture"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/webapp/channels/src/components/__snapshots__/spinner_button.test.tsx.snap b/webapp/channels/src/components/__snapshots__/spinner_button.test.tsx.snap
index c6681f005af..0254e116d73 100644
--- a/webapp/channels/src/components/__snapshots__/spinner_button.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/spinner_button.test.tsx.snap
@@ -43,19 +43,20 @@ exports[`components/SpinnerButton should match snapshot with spinning 1`] = `
     type="button"
   >
     <span
-      class="_button__label_doayp_24"
+      aria-hidden="true"
+      class="_button__icon-slot_doayp_27"
     >
       <span
-        class="LoadingSpinner with-text"
-        data-testid="loadingSpinner"
-        id="loadingSpinner"
-      >
-        <span
-          class="fa fa-spinner fa-fw fa-pulse spinner"
-          title="Loading Icon"
-        />
-        Test
-      </span>
+        aria-label="Loading"
+        class="_spinner_3elm7_10"
+        role="status"
+        style="width: 16px; height: 16px; --spinner-stroke-width: 2px;"
+      />
+    </span>
+    <span
+      class="_button__label_doayp_24"
+    >
+      Test
     </span>
   </button>
 </div>
diff --git a/webapp/channels/src/components/admin_console/global_attributes/attribute_details/graph/draft_forms.tsx b/webapp/channels/src/components/admin_console/global_attributes/attribute_details/graph/draft_forms.tsx
index e42cd373aca..e735d94a37c 100644
--- a/webapp/channels/src/components/admin_console/global_attributes/attribute_details/graph/draft_forms.tsx
+++ b/webapp/channels/src/components/admin_console/global_attributes/attribute_details/graph/draft_forms.tsx
@@ -86,7 +86,7 @@ export const AddTopLevelForm = ({
             <Button
                 type='button'
                 emphasis={isEmptyCanvas ? 'primary' : 'secondary'}
-                size={isEmptyCanvas ? 'sm' : 'md'}
+                size={isEmptyCanvas ? 'small' : 'medium'}
                 onClick={onCommit}
                 disabled={!canAdd}
                 data-testid={`${testIdPrefix}__addButton`}
diff --git a/webapp/channels/src/components/admin_console/license_settings/__snapshots__/license_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/license_settings/__snapshots__/license_settings.test.tsx.snap
index be3fc1c152e..62906af02e3 100644
--- a/webapp/channels/src/components/admin_console/license_settings/__snapshots__/license_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/license_settings/__snapshots__/license_settings.test.tsx.snap
@@ -945,22 +945,24 @@ exports[`components/admin_console/license_settings/LicenseSettings load screen w
                   <p>
                     <button
                       class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+                      disabled=""
                       type="button"
                     >
                       <span
-                        class="_button__label_doayp_24"
+                        aria-hidden="true"
+                        class="_button__icon-slot_doayp_27"
                       >
                         <span
-                          class="LoadingSpinner with-text"
-                          data-testid="loadingSpinner"
-                          id="loadingSpinner"
-                        >
-                          <span
-                            class="fa fa-spinner fa-fw fa-pulse spinner"
-                            title="Loading Icon"
-                          />
-                          Upgrading 42%
-                        </span>
+                          aria-label="Loading"
+                          class="_spinner_3elm7_10"
+                          role="status"
+                          style="width: 16px; height: 16px; --spinner-stroke-width: 2px;"
+                        />
+                      </span>
+                      <span
+                        class="_button__label_doayp_24"
+                      >
+                        Upgrading 42%
                       </span>
                     </button>
                   </p>
@@ -1235,7 +1237,7 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
                       >
                         February 04, 2018
                          
-                        3:24 AM
+                        4:24 AM
                       </span>
                     </div>
                     <div
@@ -1638,15 +1640,16 @@ See ENTERPRISE-EDITION-LICENSE.txt in your root install directory for details. S
                 <div
                   class="purchase_buttons"
                 >
-                  <div
-                    class="purchase-card"
+                  <button
+                    class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+                    type="button"
                   >
-                    <button
-                      class="btn btn-primary contact-us"
+                    <span
+                      class="_button__label_doayp_24"
                     >
                       Contact Sales
-                    </button>
-                  </div>
+                    </span>
+                  </button>
                 </div>
               </div>
             </div>
@@ -1917,7 +1920,7 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
                       >
                         February 04, 2018
                          
-                        3:24 AM
+                        4:24 AM
                       </span>
                     </div>
                     <div
@@ -2320,15 +2323,16 @@ See ENTERPRISE-EDITION-LICENSE.txt in your root install directory for details. S
                 <div
                   class="purchase_buttons"
                 >
-                  <div
-                    class="purchase-card"
+                  <button
+                    class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+                    type="button"
                   >
-                    <button
-                      class="btn btn-primary contact-us"
+                    <span
+                      class="_button__label_doayp_24"
                     >
                       Contact Sales
-                    </button>
-                  </div>
+                    </span>
+                  </button>
                 </div>
               </div>
             </div>
@@ -2585,7 +2589,7 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
                       >
                         February 04, 2018
                          
-                        3:24 AM
+                        4:24 AM
                       </span>
                     </div>
                     <div
@@ -3004,15 +3008,16 @@ See ENTERPRISE-EDITION-LICENSE.txt in your root install directory for details. S
                 <div
                   class="purchase_buttons"
                 >
-                  <div
-                    class="purchase-card"
+                  <button
+                    class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+                    type="button"
                   >
-                    <button
-                      class="btn btn-primary contact-us"
+                    <span
+                      class="_button__label_doayp_24"
                     >
                       Contact Sales
-                    </button>
-                  </div>
+                    </span>
+                  </button>
                 </div>
               </div>
             </div>
@@ -3269,7 +3274,7 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
                       >
                         February 04, 2018
                          
-                        3:24 AM
+                        4:24 AM
                       </span>
                     </div>
                     <div
@@ -3672,15 +3677,16 @@ See ENTERPRISE-EDITION-LICENSE.txt in your root install directory for details. S
                 <div
                   class="purchase_buttons"
                 >
-                  <div
-                    class="purchase-card"
+                  <button
+                    class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+                    type="button"
                   >
-                    <button
-                      class="btn btn-primary contact-us"
+                    <span
+                      class="_button__label_doayp_24"
                     >
                       Contact Sales
-                    </button>
-                  </div>
+                    </span>
+                  </button>
                 </div>
               </div>
             </div>
@@ -3937,7 +3943,7 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
                       >
                         February 04, 2018
                          
-                        3:24 AM
+                        4:24 AM
                       </span>
                     </div>
                     <div
@@ -4341,15 +4347,16 @@ See ENTERPRISE-EDITION-LICENSE.txt in your root install directory for details. S
                 <div
                   class="purchase_buttons"
                 >
-                  <div
-                    class="purchase-card"
+                  <button
+                    class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+                    type="button"
                   >
-                    <button
-                      class="btn btn-primary contact-us"
+                    <span
+                      class="_button__label_doayp_24"
                     >
                       Contact Sales
-                    </button>
-                  </div>
+                    </span>
+                  </button>
                 </div>
               </div>
             </div>
@@ -4606,7 +4613,7 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
                       >
                         February 04, 2018
                          
-                        3:24 AM
+                        4:24 AM
                       </span>
                     </div>
                     <div
@@ -5015,15 +5022,16 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
                 <div
                   class="purchase_buttons"
                 >
-                  <div
-                    class="purchase-card"
+                  <button
+                    class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+                    type="button"
                   >
-                    <button
-                      class="btn btn-primary contact-us"
+                    <span
+                      class="_button__label_doayp_24"
                     >
                       Contact Sales
-                    </button>
-                  </div>
+                    </span>
+                  </button>
                 </div>
               </div>
             </div>
@@ -5270,7 +5278,7 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
                       >
                         April 06, 2021
                          
-                        1:10 PM
+                        3:10 PM
                       </span>
                     </div>
                     <div
@@ -5602,15 +5610,16 @@ See ENTERPRISE-EDITION-LICENSE.txt in your root install directory for details. S
                 <div
                   class="purchase_buttons"
                 >
-                  <div
-                    class="purchase-card"
+                  <button
+                    class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+                    type="button"
                   >
-                    <button
-                      class="btn btn-primary contact-us"
+                    <span
+                      class="_button__label_doayp_24"
                     >
                       Contact Sales
-                    </button>
-                  </div>
+                    </span>
+                  </button>
                 </div>
               </div>
             </div>
@@ -8415,7 +8424,7 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
                       >
                         February 04, 2018
                          
-                        3:24 AM
+                        4:24 AM
                       </span>
                     </div>
                     <div
@@ -8818,15 +8827,16 @@ See ENTERPRISE-EDITION-LICENSE.txt in your root install directory for details. S
                 <div
                   class="purchase_buttons"
                 >
-                  <div
-                    class="purchase-card"
+                  <button
+                    class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+                    type="button"
                   >
-                    <button
-                      class="btn btn-primary contact-us"
+                    <span
+                      class="_button__label_doayp_24"
                     >
                       Contact Sales
-                    </button>
-                  </div>
+                    </span>
+                  </button>
                 </div>
               </div>
             </div>
@@ -9083,7 +9093,7 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
                       >
                         February 04, 2018
                          
-                        3:24 AM
+                        4:24 AM
                       </span>
                     </div>
                     <div
@@ -9486,15 +9496,16 @@ See ENTERPRISE-EDITION-LICENSE.txt in your root install directory for details. S
                 <div
                   class="purchase_buttons"
                 >
-                  <div
-                    class="purchase-card"
+                  <button
+                    class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+                    type="button"
                   >
-                    <button
-                      class="btn btn-primary contact-us"
+                    <span
+                      class="_button__label_doayp_24"
                     >
                       Contact Sales
-                    </button>
-                  </div>
+                    </span>
+                  </button>
                 </div>
               </div>
             </div>
diff --git a/webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx b/webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx
index 26b9ac09f27..cc8e6281833 100644
--- a/webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx
+++ b/webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx
@@ -248,17 +248,20 @@ const UploadLicenseModal = (props: Props): JSX.Element | null => {
                         emphasis='primary'
                         onClick={handleConfirmUpload}
                         disabled={isLoading}
+                        loading={Boolean(isLoading)}
                         id='confirm-button'
                     >
-                        <LoadingWrapper
-                            loading={Boolean(isLoading)}
-                            text={defineMessage({id: 'admin.license.modal.applying', defaultMessage: 'Applying'})}
-                        >
+                        {isLoading ? (
+                            <FormattedMessage
+                                id='admin.license.modal.applying'
+                                defaultMessage='Applying'
+                            />
+                        ) : (
                             <FormattedMessage
                                 id='admin.license.modal.apply'
                                 defaultMessage='Apply License'
                             />
-                        </LoadingWrapper>
+                        )}
                     </Button>
                 </div>
             </>
diff --git a/webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx b/webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx
index 14602645684..acfec1575da 100644
--- a/webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx
+++ b/webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx
@@ -8,7 +8,6 @@ import {buttonClassNames} from '@mattermost/shared/components/button';
 
 import SetupSystemSvg from 'components/common/svg_images_components/setup_system_svg';
 import ExternalLink from 'components/external_link';
-import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 
 import {LicenseLinks} from 'utils/constants';
 import {format} from 'utils/markdown';
@@ -83,22 +82,20 @@ const TeamEditionRightPanel: React.FC<TeamEditionRightPanelProps> = ({
                         type='button'
                         onClick={onHandleUpgrade}
                         emphasis='primary'
+                        loading={upgradingPercentage > 0}
                     >
-                        <LoadingWrapper
-                            loading={upgradingPercentage > 0}
-                            text={
-                                <FormattedMessage
-                                    id='admin.license.enterprise.upgrading'
-                                    defaultMessage='Upgrading {percentage}%'
-                                    values={{percentage: upgradingPercentage}}
-                                />
-                            }
-                        >
+                        {upgradingPercentage > 0 ? (
+                            <FormattedMessage
+                                id='admin.license.enterprise.upgrading'
+                                defaultMessage='Upgrading {percentage}%'
+                                values={{percentage: upgradingPercentage}}
+                            />
+                        ) : (
                             <FormattedMessage
                                 id='admin.license.enterprise.upgrade'
                                 defaultMessage='Upgrade to Enterprise Edition'
                             />
-                        </LoadingWrapper>
+                        )}
                     </Button>
                 </p>
                 <p className='upgrade-legal-terms'>
@@ -151,19 +148,19 @@ const TeamEditionRightPanel: React.FC<TeamEditionRightPanelProps> = ({
                         type='button'
                         onClick={handleRestart}
                         emphasis='primary'
+                        loading={restarting}
                     >
-                        <LoadingWrapper
-                            loading={restarting}
-                            text={intl.formatMessage({
+                        {restarting ? (
+                            intl.formatMessage({
                                 id: 'admin.licenseSettings.teamEdition.teamEditionRightPanel.restarting',
                                 defaultMessage: 'Restarting',
-                            })}
-                        >
+                            })
+                        ) : (
                             <FormattedMessage
                                 id='admin.licenseSettings.teamEdition.teamEditionRightPanel.restart'
                                 defaultMessage='Restart Server'
                             />
-                        </LoadingWrapper>
+                        )}
                     </Button>
                 </p>
                 {restartError && (
diff --git a/webapp/channels/src/components/admin_console/license_settings/trial_banner/trial_banner.tsx b/webapp/channels/src/components/admin_console/license_settings/trial_banner/trial_banner.tsx
index f3ba4cd85d5..742ac469d66 100644
--- a/webapp/channels/src/components/admin_console/license_settings/trial_banner/trial_banner.tsx
+++ b/webapp/channels/src/components/admin_console/license_settings/trial_banner/trial_banner.tsx
@@ -13,7 +13,6 @@ import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 import AlertBanner from 'components/alert_banner';
 import withOpenStartTrialFormModal from 'components/common/hocs/cloud/with_open_start_trial_form_modal';
 import ExternalLink from 'components/external_link';
-import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 
 import {AboutLinks, LicenseLinks, Preferences, Unique} from 'utils/constants';
 import {format} from 'utils/markdown';
@@ -305,10 +304,10 @@ const TrialBanner = ({
                 type='button'
                 onClick={onHandleUpgrade}
                 emphasis='primary'
+                loading={upgradingPercentage > 0}
             >
-                <LoadingWrapper
-                    loading={upgradingPercentage > 0}
-                    text={upgradingPercentage === 100 && restarting ? (
+                {upgradingPercentage > 0 ? (
+                    upgradingPercentage === 100 && restarting ? (
                         <FormattedMessage
                             id='admin.license.enterprise.restarting'
                             defaultMessage='Restarting'
@@ -318,13 +317,14 @@ const TrialBanner = ({
                             id='admin.license.enterprise.upgrading'
                             defaultMessage='Upgrading {percentage}%'
                             values={{percentage: upgradingPercentage}}
-                        />)}
-                >
+                        />
+                    )
+                ) : (
                     <FormattedMessage
                         id='admin.license.trialUpgradeAndRequest.submit'
                         defaultMessage='Upgrade Server And Start trial'
                     />
-                </LoadingWrapper>
+                )}
             </Button>
         );
 
diff --git a/webapp/channels/src/components/admin_console/request_button/request_button.tsx b/webapp/channels/src/components/admin_console/request_button/request_button.tsx
index c3236ebda18..596d99d393d 100644
--- a/webapp/channels/src/components/admin_console/request_button/request_button.tsx
+++ b/webapp/channels/src/components/admin_console/request_button/request_button.tsx
@@ -10,7 +10,6 @@ import {Button, type ButtonEmphasis} from '@mattermost/compass-ui/components/but
 
 import SuccessIcon from 'components/widgets/icons/fa_success_icon';
 import WarningIcon from 'components/widgets/icons/fa_warning_icon';
-import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 
 /**
  * A button which, when clicked, performs an action and displays
@@ -249,21 +248,17 @@ export default class RequestButton extends React.PureComponent<Props, State> {
                             emphasis={this.props.buttonEmphasis || 'tertiary'}
                             onClick={this.handleRequest}
                             disabled={this.props.disabled}
+                            loading={this.state.busy}
                         >
-                            <LoadingWrapper
-                                loading={this.state.busy}
-                                text={
-                                    this.props.loadingText ||
-                                    (
-                                        <FormattedMessage
-                                            id={'admin.requestButton.loading'}
-                                            defaultMessage={'Loading...'}
-                                        />
-                                    )
-                                }
-                            >
-                                {this.props.buttonText}
-                            </LoadingWrapper>
+                            {this.state.busy ? (
+                                this.props.loadingText ||
+                                (
+                                    <FormattedMessage
+                                        id={'admin.requestButton.loading'}
+                                        defaultMessage={'Loading...'}
+                                    />
+                                )
+                            ) : this.props.buttonText}
                         </Button>
                         {this.props.alternativeActionElement}
                         {message}
diff --git a/webapp/channels/src/components/integrations/edit_incoming_webhook/__snapshots__/edit_incoming_webhook.test.tsx.snap b/webapp/channels/src/components/integrations/edit_incoming_webhook/__snapshots__/edit_incoming_webhook.test.tsx.snap
index cfb4ac8ef61..98a455fcb22 100644
--- a/webapp/channels/src/components/integrations/edit_incoming_webhook/__snapshots__/edit_incoming_webhook.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/edit_incoming_webhook/__snapshots__/edit_incoming_webhook.test.tsx.snap
@@ -189,19 +189,20 @@ exports[`components/integrations/EditIncomingWebhook should have called submitHo
             type="submit"
           >
             <span
-              class="_button__label_doayp_24"
+              aria-hidden="true"
+              class="_button__icon-slot_doayp_27"
             >
               <span
-                class="LoadingSpinner with-text"
-                data-testid="loadingSpinner"
-                id="loadingSpinner"
-              >
-                <span
-                  class="fa fa-spinner fa-fw fa-pulse spinner"
-                  title="Loading Icon"
-                />
-                Updating...
-              </span>
+                aria-label="Loading"
+                class="_spinner_3elm7_10"
+                role="status"
+                style="width: 16px; height: 16px; --spinner-stroke-width: 2px;"
+              />
+            </span>
+            <span
+              class="_button__label_doayp_24"
+            >
+              Updating...
             </span>
           </button>
         </div>
@@ -400,19 +401,20 @@ exports[`components/integrations/EditIncomingWebhook should have called submitHo
             type="submit"
           >
             <span
-              class="_button__label_doayp_24"
+              aria-hidden="true"
+              class="_button__icon-slot_doayp_27"
             >
               <span
-                class="LoadingSpinner with-text"
-                data-testid="loadingSpinner"
-                id="loadingSpinner"
-              >
-                <span
-                  class="fa fa-spinner fa-fw fa-pulse spinner"
-                  title="Loading Icon"
-                />
-                Updating...
-              </span>
+                aria-label="Loading"
+                class="_spinner_3elm7_10"
+                role="status"
+                style="width: 16px; height: 16px; --spinner-stroke-width: 2px;"
+              />
+            </span>
+            <span
+              class="_button__label_doayp_24"
+            >
+              Updating...
             </span>
           </button>
         </div>
diff --git a/webapp/channels/src/components/save_button.tsx b/webapp/channels/src/components/save_button.tsx
index 9fc37609dd8..9b0267c7b07 100644
--- a/webapp/channels/src/components/save_button.tsx
+++ b/webapp/channels/src/components/save_button.tsx
@@ -7,8 +7,6 @@ import {FormattedMessage} from 'react-intl';
 import {Button} from '@mattermost/compass-ui/components/button';
 import type {ButtonEmphasis, ButtonSize as CompassButtonSize} from '@mattermost/compass-ui/components/button';
 
-import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
-
 type SharedSize = 'xs' | 'sm' | 'md' | 'lg';
 type SharedVariant = '' | 'destructive' | 'inverted';
 
@@ -72,14 +70,10 @@ const SaveButton: React.FC<Props> = ({
             destructive={variant === 'destructive'}
             appearance={variant === 'inverted' ? 'inverted' : undefined}
             className={extraClasses}
+            loading={saving}
             {...props}
         >
-            <LoadingWrapper
-                loading={saving}
-                text={savingMessage}
-            >
-                <span>{defaultMessage}</span>
-            </LoadingWrapper>
+            {saving ? savingMessage : defaultMessage}
         </Button>
     );
 };
diff --git a/webapp/channels/src/components/setting_item_max.tsx b/webapp/channels/src/components/setting_item_max.tsx
index 19477308ee2..f1130d801a1 100644
--- a/webapp/channels/src/components/setting_item_max.tsx
+++ b/webapp/channels/src/components/setting_item_max.tsx
@@ -6,7 +6,8 @@ import React, {useCallback, useEffect, useRef} from 'react';
 import type {JSX, ReactNode} from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {Button, type ButtonVariant} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
+import type {ButtonVariant} from '@mattermost/shared/components/button';
 
 import SaveButton from 'components/save_button';
 
@@ -98,6 +99,7 @@ const SettingItemMax = ({
                 target.parentElement &&
                 target.parentElement.className !== 'react-select__input' &&
                 !target.classList.contains('btn-tertiary') &&
+                target.id !== 'cancelSetting' &&
                 settingList.current &&
                 settingList.current.contains(target)) {
                 handleSubmit(e);
@@ -257,15 +259,17 @@ const SettingItemMax = ({
                         >
                             {serverError}
                         </div>
-                        {submit}
-                        <Button
-                            id='cancelSetting'
-                            data-testid='cancelButton'
-                            emphasis='tertiary'
-                            onClick={handleUpdateSection}
-                        >
-                            {cancelButtonText}
-                        </Button>
+                        <div className='setting-list-item__buttons'>
+                            {submit}
+                            <Button
+                                id='cancelSetting'
+                                data-testid='cancelButton'
+                                emphasis='tertiary'
+                                onClick={handleUpdateSection}
+                            >
+                                {cancelButtonText}
+                            </Button>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/webapp/channels/src/components/setting_picture.tsx b/webapp/channels/src/components/setting_picture.tsx
index b3482622703..f631589f32b 100644
--- a/webapp/channels/src/components/setting_picture.tsx
+++ b/webapp/channels/src/components/setting_picture.tsx
@@ -3,13 +3,12 @@
 
 import React, {Component, createRef} from 'react';
 import type {ChangeEvent, CSSProperties, MouseEvent, ReactNode, RefObject} from 'react';
-import {defineMessage, FormattedMessage} from 'react-intl';
+import {FormattedMessage} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 import {WithTooltip} from '@mattermost/shared/components/tooltip';
 
 import FormError from 'components/form_error';
-import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 
 import {Constants} from 'utils/constants';
 import * as FileUtils from 'utils/file_utils';
@@ -269,7 +268,7 @@ export default class SettingPicture extends Component<Props, State> {
         let buttonRender;
         if (this.props.onSubmit) {
             buttonRender = (
-                <span>
+                <>
                     <input
                         data-testid='uploadPicture'
                         ref={this.selectInput}
@@ -301,19 +300,22 @@ export default class SettingPicture extends Component<Props, State> {
                         ref={this.confirmButton}
                         emphasis='primary'
                         onClick={this.handleSave}
+                        loading={this.props.loadingPicture}
                         aria-label={this.props.loadingPicture ? localizeMessage({id: 'setting_picture.uploading', defaultMessage: 'Uploading...'}) : localizeMessage({id: 'setting_picture.save', defaultMessage: 'Save'})}
                     >
-                        <LoadingWrapper
-                            loading={this.props.loadingPicture}
-                            text={defineMessage({id: 'setting_picture.uploading', defaultMessage: 'Uploading...'})}
-                        >
+                        {this.props.loadingPicture ? (
+                            <FormattedMessage
+                                id='setting_picture.uploading'
+                                defaultMessage='Uploading...'
+                            />
+                        ) : (
                             <FormattedMessage
                                 id='setting_picture.save'
                                 defaultMessage='Save'
                             />
-                        </LoadingWrapper>
+                        )}
                     </Button>
-                </span>
+                </>
             );
         }
         return (
@@ -344,19 +346,20 @@ export default class SettingPicture extends Component<Props, State> {
                                 errors={[this.props.clientError, this.props.serverError]}
                                 type={'modal'}
                             />
-                            {buttonRender}
-                            <Button
-                                data-testid='cancelSettingPicture'
-                                emphasis='tertiary'
-                                className='ml-2'
-                                onClick={this.handleCancel}
-                                aria-label={localizeMessage({id: 'setting_picture.cancel', defaultMessage: 'Cancel'})}
-                            >
-                                <FormattedMessage
-                                    id='setting_picture.cancel'
-                                    defaultMessage='Cancel'
-                                />
-                            </Button>
+                            <div className='setting-list-item__buttons'>
+                                {buttonRender}
+                                <Button
+                                    data-testid='cancelSettingPicture'
+                                    emphasis='tertiary'
+                                    onClick={this.handleCancel}
+                                    aria-label={localizeMessage({id: 'setting_picture.cancel', defaultMessage: 'Cancel'})}
+                                >
+                                    <FormattedMessage
+                                        id='setting_picture.cancel'
+                                        defaultMessage='Cancel'
+                                    />
+                                </Button>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/webapp/channels/src/components/spinner_button.tsx b/webapp/channels/src/components/spinner_button.tsx
index f2fe84830b8..2ced6b48e47 100644
--- a/webapp/channels/src/components/spinner_button.tsx
+++ b/webapp/channels/src/components/spinner_button.tsx
@@ -3,13 +3,12 @@
 
 import React from 'react';
 import type {ButtonHTMLAttributes, ReactNode} from 'react';
+import {FormattedMessage} from 'react-intl';
 import type {MessageDescriptor} from 'react-intl';
 
 import {Button} from '@mattermost/compass-ui/components/button';
 import type {ButtonEmphasis, ButtonSize as CompassButtonSize} from '@mattermost/compass-ui/components/button';
 
-import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
-
 type SharedSize = 'xs' | 'sm' | 'md' | 'lg';
 
 const SHARED_TO_COMPASS_SIZE: Record<SharedSize, CompassButtonSize> = {
@@ -38,6 +37,14 @@ function mapSize(size?: SharedSize | CompassButtonSize): CompassButtonSize | und
     return size as CompassButtonSize;
 }
 
+function isMessageDescriptor(text: ReactNode | MessageDescriptor): text is MessageDescriptor {
+    return typeof text === 'object' && text !== null && 'id' in text && 'defaultMessage' in text;
+}
+
+function renderSpinningText(text: ReactNode | MessageDescriptor): ReactNode {
+    return isMessageDescriptor(text) ? <FormattedMessage {...text}/> : text;
+}
+
 const SpinnerButton = ({
     spinning = false,
     spinningText,
@@ -49,15 +56,11 @@ const SpinnerButton = ({
     return (
         <Button
             disabled={disabled || spinning}
+            loading={spinning}
             size={mapSize(size)}
             {...otherProps}
         >
-            <LoadingWrapper
-                loading={spinning}
-                text={spinningText}
-            >
-                {children}
-            </LoadingWrapper>
+            {spinning ? renderSpinningText(spinningText) : children}
         </Button>
     );
 };
diff --git a/webapp/channels/src/components/user_settings/advanced/join_leave_section/__snapshots__/join_leave_section.test.tsx.snap b/webapp/channels/src/components/user_settings/advanced/join_leave_section/__snapshots__/join_leave_section.test.tsx.snap
index 096218f6921..4590dd3753c 100644
--- a/webapp/channels/src/components/user_settings/advanced/join_leave_section/__snapshots__/join_leave_section.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/advanced/join_leave_section/__snapshots__/join_leave_section.test.tsx.snap
@@ -112,27 +112,34 @@ exports[`components/user_settings/advanced/JoinLeaveSection should match snapsho
           <div
             role="alert"
           />
-          <button
-            class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span
-              class="_button__label_doayp_24"
+            <button
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
             >
-              <span>
+              <span
+                class="_button__label_doayp_24"
+              >
                 Save
               </span>
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/webapp/channels/src/components/user_settings/display/__snapshots__/user_settings_display.test.tsx.snap b/webapp/channels/src/components/user_settings/display/__snapshots__/user_settings_display.test.tsx.snap
index 20071d13ca4..d1fa0d55ef5 100644
--- a/webapp/channels/src/components/user_settings/display/__snapshots__/user_settings_display.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/display/__snapshots__/user_settings_display.test.tsx.snap
@@ -454,27 +454,34 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
                 <div
                   role="alert"
                 />
-                <button
-                  class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-                  data-testid="saveSetting"
-                  id="saveSetting"
-                  type="submit"
+                <div
+                  class="setting-list-item__buttons"
                 >
-                  <span
-                    class="_button__label_doayp_24"
+                  <button
+                    class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+                    data-testid="saveSetting"
+                    id="saveSetting"
+                    type="submit"
                   >
-                    <span>
+                    <span
+                      class="_button__label_doayp_24"
+                    >
                       Save
                     </span>
-                  </span>
-                </button>
-                <button
-                  class="btn btn-tertiary"
-                  data-testid="cancelButton"
-                  id="cancelSetting"
-                >
-                  Cancel
-                </button>
+                  </button>
+                  <button
+                    class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+                    data-testid="cancelButton"
+                    id="cancelSetting"
+                    type="button"
+                  >
+                    <span
+                      class="_button__label_doayp_24"
+                    >
+                      Cancel
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -1020,27 +1027,34 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
                 <div
                   role="alert"
                 />
-                <button
-                  class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-                  data-testid="saveSetting"
-                  id="saveSetting"
-                  type="submit"
+                <div
+                  class="setting-list-item__buttons"
                 >
-                  <span
-                    class="_button__label_doayp_24"
+                  <button
+                    class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+                    data-testid="saveSetting"
+                    id="saveSetting"
+                    type="submit"
                   >
-                    <span>
+                    <span
+                      class="_button__label_doayp_24"
+                    >
                       Save
                     </span>
-                  </span>
-                </button>
-                <button
-                  class="btn btn-tertiary"
-                  data-testid="cancelButton"
-                  id="cancelSetting"
-                >
-                  Cancel
-                </button>
+                  </button>
+                  <button
+                    class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+                    data-testid="cancelButton"
+                    id="cancelSetting"
+                    type="button"
+                  >
+                    <span
+                      class="_button__label_doayp_24"
+                    >
+                      Cancel
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -1360,27 +1374,34 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
                 <div
                   role="alert"
                 />
-                <button
-                  class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-                  data-testid="saveSetting"
-                  id="saveSetting"
-                  type="submit"
+                <div
+                  class="setting-list-item__buttons"
                 >
-                  <span
-                    class="_button__label_doayp_24"
+                  <button
+                    class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+                    data-testid="saveSetting"
+                    id="saveSetting"
+                    type="submit"
                   >
-                    <span>
+                    <span
+                      class="_button__label_doayp_24"
+                    >
                       Save
                     </span>
-                  </span>
-                </button>
-                <button
-                  class="btn btn-tertiary"
-                  data-testid="cancelButton"
-                  id="cancelSetting"
-                >
-                  Cancel
-                </button>
+                  </button>
+                  <button
+                    class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+                    data-testid="cancelButton"
+                    id="cancelSetting"
+                    type="button"
+                  >
+                    <span
+                      class="_button__label_doayp_24"
+                    >
+                      Cancel
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -2152,27 +2173,34 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
                 <div
                   role="alert"
                 />
-                <button
-                  class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-                  data-testid="saveSetting"
-                  id="saveSetting"
-                  type="submit"
+                <div
+                  class="setting-list-item__buttons"
                 >
-                  <span
-                    class="_button__label_doayp_24"
+                  <button
+                    class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+                    data-testid="saveSetting"
+                    id="saveSetting"
+                    type="submit"
                   >
-                    <span>
+                    <span
+                      class="_button__label_doayp_24"
+                    >
                       Save
                     </span>
-                  </span>
-                </button>
-                <button
-                  class="btn btn-tertiary"
-                  data-testid="cancelButton"
-                  id="cancelSetting"
-                >
-                  Cancel
-                </button>
+                  </button>
+                  <button
+                    class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+                    data-testid="cancelButton"
+                    id="cancelSetting"
+                    type="button"
+                  >
+                    <span
+                      class="_button__label_doayp_24"
+                    >
+                      Cancel
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -3742,27 +3770,34 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
                 <div
                   role="alert"
                 />
-                <button
-                  class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-                  data-testid="saveSetting"
-                  id="saveSetting"
-                  type="submit"
+                <div
+                  class="setting-list-item__buttons"
                 >
-                  <span
-                    class="_button__label_doayp_24"
+                  <button
+                    class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+                    data-testid="saveSetting"
+                    id="saveSetting"
+                    type="submit"
                   >
-                    <span>
+                    <span
+                      class="_button__label_doayp_24"
+                    >
                       Save
                     </span>
-                  </span>
-                </button>
-                <button
-                  class="btn btn-tertiary"
-                  data-testid="cancelButton"
-                  id="cancelSetting"
-                >
-                  Cancel
-                </button>
+                  </button>
+                  <button
+                    class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+                    data-testid="cancelButton"
+                    id="cancelSetting"
+                    type="button"
+                  >
+                    <span
+                      class="_button__label_doayp_24"
+                    >
+                      Cancel
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -4431,27 +4466,34 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
                 <div
                   role="alert"
                 />
-                <button
-                  class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-                  data-testid="saveSetting"
-                  id="saveSetting"
-                  type="submit"
+                <div
+                  class="setting-list-item__buttons"
                 >
-                  <span
-                    class="_button__label_doayp_24"
+                  <button
+                    class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+                    data-testid="saveSetting"
+                    id="saveSetting"
+                    type="submit"
                   >
-                    <span>
+                    <span
+                      class="_button__label_doayp_24"
+                    >
                       Save
                     </span>
-                  </span>
-                </button>
-                <button
-                  class="btn btn-tertiary"
-                  data-testid="cancelButton"
-                  id="cancelSetting"
-                >
-                  Cancel
-                </button>
+                  </button>
+                  <button
+                    class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+                    data-testid="cancelButton"
+                    id="cancelSetting"
+                    type="button"
+                  >
+                    <span
+                      class="_button__label_doayp_24"
+                    >
+                      Cancel
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
diff --git a/webapp/channels/src/components/user_settings/display/render_emoticons_as_emoji/__snapshots__/render_emoticons_as_emoji.test.tsx.snap b/webapp/channels/src/components/user_settings/display/render_emoticons_as_emoji/__snapshots__/render_emoticons_as_emoji.test.tsx.snap
index 0996a0fb348..4ad77b4cd3c 100644
--- a/webapp/channels/src/components/user_settings/display/render_emoticons_as_emoji/__snapshots__/render_emoticons_as_emoji.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/display/render_emoticons_as_emoji/__snapshots__/render_emoticons_as_emoji.test.tsx.snap
@@ -71,27 +71,34 @@ exports[`components/user_settings/display/render_emoticons_as_emoji/render_emoti
           <div
             role="alert"
           />
-          <button
-            class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span
-              class="_button__label_doayp_24"
+            <button
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
             >
-              <span>
+              <span
+                class="_button__label_doayp_24"
+              >
                 Save
               </span>
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/webapp/channels/src/components/user_settings/notifications/desktop_and_mobile_notification_setting/__snapshots__/index.test.tsx.snap b/webapp/channels/src/components/user_settings/notifications/desktop_and_mobile_notification_setting/__snapshots__/index.test.tsx.snap
index 1118afefa61..a05005ef7cc 100644
--- a/webapp/channels/src/components/user_settings/notifications/desktop_and_mobile_notification_setting/__snapshots__/index.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/notifications/desktop_and_mobile_notification_setting/__snapshots__/index.test.tsx.snap
@@ -166,27 +166,34 @@ exports[`DesktopNotificationSettings should match snapshot, on max setting 1`] =
           <div
             role="alert"
           />
-          <button
-            class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span
-              class="_button__label_doayp_24"
+            <button
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
             >
-              <span>
+              <span
+                class="_button__label_doayp_24"
+              >
                 Save
               </span>
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -389,27 +396,34 @@ exports[`DesktopNotificationSettings should not show desktop thread notification
           <div
             role="alert"
           />
-          <button
-            class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span
-              class="_button__label_doayp_24"
+            <button
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
             >
-              <span>
+              <span
+                class="_button__label_doayp_24"
+              >
                 Save
               </span>
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/webapp/channels/src/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.tsx.snap b/webapp/channels/src/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.tsx.snap
index c60674fff11..fdd857066a8 100644
--- a/webapp/channels/src/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.tsx.snap
@@ -68,27 +68,34 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
           <div
             role="alert"
           />
-          <button
-            class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span
-              class="_button__label_doayp_24"
+            <button
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
             >
-              <span>
+              <span
+                class="_button__label_doayp_24"
+              >
                 Save
               </span>
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -314,27 +321,34 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
           <div
             role="alert"
           />
-          <button
-            class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span
-              class="_button__label_doayp_24"
+            <button
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
             >
-              <span>
+              <span
+                class="_button__label_doayp_24"
+              >
                 Save
               </span>
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -376,13 +390,22 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
           <div
             role="alert"
           />
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
+          <div
+            class="setting-list-item__buttons"
           >
-            Cancel
-          </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -481,27 +504,34 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
               </label>
             </div>
           </div>
-          <button
-            class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span
-              class="_button__label_doayp_24"
+            <button
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
             >
-              <span>
+              <span
+                class="_button__label_doayp_24"
+              >
                 Save
               </span>
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -593,27 +623,34 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
           <div
             role="alert"
           />
-          <button
-            class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span
-              class="_button__label_doayp_24"
+            <button
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
             >
-              <span>
+              <span
+                class="_button__label_doayp_24"
+              >
                 Save
               </span>
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -689,27 +726,34 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
           <div
             role="alert"
           />
-          <button
-            class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span
-              class="_button__label_doayp_24"
+            <button
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
             >
-              <span>
+              <span
+                class="_button__label_doayp_24"
+              >
                 Save
               </span>
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap b/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap
index 8a7150e77b2..82a20108b41 100644
--- a/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap
@@ -47,27 +47,34 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
           <div
             role="alert"
           />
-          <button
-            class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span
-              class="_button__label_doayp_24"
+            <button
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
             >
-              <span>
+              <span
+                class="_button__label_doayp_24"
+              >
                 Save
               </span>
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -141,27 +148,34 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
           <div
             role="alert"
           />
-          <button
-            class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span
-              class="_button__label_doayp_24"
+            <button
+              class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
             >
-              <span>
+              <span
+                class="_button__label_doayp_24"
+              >
                 Save
               </span>
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/webapp/channels/src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap b/webapp/channels/src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap
index fa4c1c14f2b..62ee3689183 100644
--- a/webapp/channels/src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap
@@ -83,9 +83,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
           id="passwordDesc"
         >
           Last updated 
-          Feb 13, 2009
+          Feb 14, 2009
            at 
-          11:31 PM
+          12:31 AM
         </div>
       </div>
       <div
@@ -254,9 +254,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
           id="passwordDesc"
         >
           Last updated 
-          Feb 13, 2009
+          Feb 14, 2009
            at 
-          11:31 PM
+          12:31 AM
         </div>
       </div>
       <div
@@ -425,9 +425,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
           id="passwordDesc"
         >
           Last updated 
-          Feb 13, 2009
+          Feb 14, 2009
            at 
-          11:31 PM
+          12:31 AM
         </div>
       </div>
       <div
@@ -596,9 +596,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
           id="passwordDesc"
         >
           Last updated 
-          Feb 13, 2009
+          Feb 14, 2009
            at 
-          11:31 PM
+          12:31 AM
         </div>
       </div>
       <div
diff --git a/webapp/channels/src/components/user_settings/security/mfa_section/__snapshots__/mfa_section.test.tsx.snap b/webapp/channels/src/components/user_settings/security/mfa_section/__snapshots__/mfa_section.test.tsx.snap
index eb8f319acd7..8430f8b1ce9 100644
--- a/webapp/channels/src/components/user_settings/security/mfa_section/__snapshots__/mfa_section.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/security/mfa_section/__snapshots__/mfa_section.test.tsx.snap
@@ -125,13 +125,22 @@ exports[`MfaSection rendering when section is expanded and MFA is active and enf
           <div
             role="alert"
           />
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
+          <div
+            class="setting-list-item__buttons"
           >
-            Cancel
-          </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -184,13 +193,22 @@ exports[`MfaSection rendering when section is expanded and MFA is active but not
           <div
             role="alert"
           />
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
+          <div
+            class="setting-list-item__buttons"
           >
-            Cancel
-          </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -243,13 +261,22 @@ exports[`MfaSection rendering when section is expanded and MFA is not active 1`]
           <div
             role="alert"
           />
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
+          <div
+            class="setting-list-item__buttons"
           >
-            Cancel
-          </button>
+            <button
+              class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_doayp_24"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/webapp/channels/src/sass/components/_save-button.scss b/webapp/channels/src/sass/components/_save-button.scss
index be5afb5abec..79b3772c7aa 100644
--- a/webapp/channels/src/sass/components/_save-button.scss
+++ b/webapp/channels/src/sass/components/_save-button.scss
@@ -3,3 +3,9 @@
         margin-right: 10px;
     }
 }
+
+.setting-list-item__buttons {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s, 8px);
+}