From bb76d8329c9d2206519813201894d27fa0467d29 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 8 Oct 2026 20:57:31 +0900
Subject: [PATCH 1/2] Button: Use the Spinner component for loading indicators

---
 packages/ui/CHANGELOG.md                |  4 ++
 packages/ui/src/button/button.tsx       |  4 ++
 packages/ui/src/button/style.module.css | 71 +++++++------------------
 3 files changed, 28 insertions(+), 51 deletions(-)

diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index 544b2c2d413f35..327980e96a0205 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   `Button`, `IconButton`: Use the shared `Spinner` for loading indicators.
+
 ### Bug Fixes
 
 -   `Menu`, `Popover`: Keep popups open when the user interacts with an iframe inside the popup. ([#83870](https://github.com/WordPress/gutenberg/pull/83870))
diff --git a/packages/ui/src/button/button.tsx b/packages/ui/src/button/button.tsx
index 1584dd4aac6e24..7ee6fd47759fcc 100644
--- a/packages/ui/src/button/button.tsx
+++ b/packages/ui/src/button/button.tsx
@@ -4,6 +4,7 @@ import { speak } from '@wordpress/a11y';
 import { forwardRef, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { type ButtonProps } from './types';
+import { Spinner } from '../spinner';
 import styles from './style.module.css';
 import resetStyles from '../utils/css/resets.module.css';
 import focusStyles from '../utils/css/focus.module.scss';
@@ -59,6 +60,9 @@ export const Button = forwardRef< HTMLButtonElement, ButtonProps >(
 				{ ...props }
 			>
 				{ children }
+				{ loading && variant !== 'unstyled' && (
+					<Spinner className={ styles.spinner } />
+				) }
 			</_Button>
 		);
 	}
diff --git a/packages/ui/src/button/style.module.css b/packages/ui/src/button/style.module.css
index 758462870a1fd6..4bf721f6c76f35 100644
--- a/packages/ui/src/button/style.module.css
+++ b/packages/ui/src/button/style.module.css
@@ -109,41 +109,6 @@
 					color: GrayText;
 				}
 			}
-
-			/* Loading spinner — not animated and hidden unless in loading state */
-			&::before {
-				content: "";
-				position: absolute;
-				top: 50%;
-				/* stylelint-disable-next-line logical-css/require-logical-properties -- Physical centering technique used with transform: translate(-50%, -50%) */
-				left: 50%;
-				transform: translate(-50%, -50%);
-
-				display: block;
-				box-sizing: border-box;
-				height: var(--wp-ui-button-font-size);
-				aspect-ratio: 1;
-
-				border: var(--wpds-border-width-focus) solid;
-				border-block-start-color: var(--wp-ui-button-foreground-color);
-				border-inline-end-color: var(--wp-ui-button-foreground-color);
-				border-block-end-color: transparent;
-				border-inline-start-color: transparent;
-				border-radius: 50%;
-
-				pointer-events: none;
-				opacity: 0;
-
-				@media not ( prefers-reduced-motion ) {
-					transition: opacity 0.1s ease-out;
-				}
-
-				@media ( forced-colors: active ) {
-					border-color: ButtonText;
-					border-block-end-style: none;
-					border-inline-start-style: none;
-				}
-			}
 		}
 
 		.is-small {
@@ -245,29 +210,33 @@
 				color: ButtonFace;
 			}
 
-			* {
+			> :not(.spinner) {
 				opacity: 0;
 			}
+		}
+	}
 
-			&::before {
-				transition-delay: 0.05s;
-				opacity: 1;
+	@layer compositions {
+		.spinner {
+			position: absolute;
+			inset: 0;
+			margin: auto;
+			width: var(--wp-ui-button-font-size);
+			height: var(--wp-ui-button-font-size);
+			color: var(--wp-ui-button-foreground-color);
+			pointer-events: none;
 
-				@media not ( prefers-reduced-motion ) {
-					animation: loading-animation 1s linear infinite;
+			@media ( prefers-reduced-motion ) {
+				> * {
+					animation: none;
 				}
 			}
-		}
-
-	}
 
-	@keyframes loading-animation {
-		0% {
-			transform: translate(-50%, -50%) rotate(0deg);
-		}
-
-		100% {
-			transform: translate(-50%, -50%) rotate(360deg);
+			@media ( forced-colors: active ) {
+				> * {
+					stroke: ButtonText;
+				}
+			}
 		}
 	}
 }

From d7f4a98728f8f8991a0542377a6f5cab01cef84e Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 8 Oct 2026 20:59:26 +0900
Subject: [PATCH 2/2] Add Button spinner changelog PR reference

---
 packages/ui/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index 327980e96a0205..81a205ab79a2b7 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 ### Enhancements
 
--   `Button`, `IconButton`: Use the shared `Spinner` for loading indicators.
+-   `Button`, `IconButton`: Use the shared `Spinner` for loading indicators ([#84321](https://github.com/WordPress/gutenberg/pull/84321)).
 
 ### Bug Fixes