diff --git a/dist/button/button.css b/dist/button/button.css
index e08f786ae..cf95f5827 100644
--- a/dist/button/button.css
+++ b/dist/button/button.css
@@ -186,6 +186,10 @@ button.btn .progress-spinner {
   margin: -4px 0;
   width: 24px;
 }
+button.btn--form .progress-spinner {
+  margin-left: auto;
+  margin-right: auto;
+}
 button.btn--primary.btn--destructive .progress-spinner {
   --color-spinner-icon-background: #ec7089;
   --color-spinner-icon-foreground: var(--color-foreground-on-accent);
diff --git a/src/less/button/button.less b/src/less/button/button.less
index 49ccc8437..c8ea640e0 100644
--- a/src/less/button/button.less
+++ b/src/less/button/button.less
@@ -154,6 +154,11 @@ button.btn .progress-spinner {
     width: 24px;
 }
 
+button.btn--form .progress-spinner {
+    margin-left: auto;
+    margin-right: auto;
+}
+
 button.btn--primary.btn--destructive .progress-spinner {
     --color-spinner-icon-background: #ec7089;
     --color-spinner-icon-foreground: var(--color-foreground-on-accent);
diff --git a/src/less/button/stories/button/base.stories.js b/src/less/button/stories/button/base.stories.js
index de654091f..6030ae300 100644
--- a/src/less/button/stories/button/base.stories.js
+++ b/src/less/button/stories/button/base.stories.js
@@ -37,6 +37,18 @@ export const busy = () => `
 </button>
 `;
 
+export const formBusy = () => `
+<button class="btn btn--form" aria-label="Busy">
+    <span class="btn__cell">
+        <span class="progress-spinner">
+            <svg class="icon icon--spinner" focusable="false" aria-hidden="true">
+                <use xlink:href="#icon-spinner"></use>
+            </svg>
+        </span>
+    </span>
+</button>
+`;
+
 export const submit = () => '<button type="submit" class="btn">Submit</button>';
 
 export const reset = () => '<button type="reset" class="btn">Reset</button>';