From cf2d0ad723cbe23c799873bd0ed32b01a1094e42 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 22 May 2026 11:33:55 -0300
Subject: [PATCH 1/4] Connection: migrate ActionButton, Button, and Text to
 @wordpress/ui

Drop the last 5 migration-relevant @automattic/jetpack-components imports
in js-packages/connection. ActionButton's isLoading/displayError/errorMessage
behavior is preserved by mapping isLoading -> @wordpress/ui Button's loading
prop and rendering the error message as a sibling paragraph with the same
jp-action-button__error class. The default error string matches ActionButton's
default, so existing tests pass unchanged.

Keepers (DecorativeCard, getRedirectUrl, JetpackLogo, PricingCard,
TermsOfService) remain on @automattic/jetpack-components; the package
dependency stays.

Follows #48150 (Publicize), #48489 (My Jetpack interstitials), #49098
(Partner Coupon), and #48909 (CUT migration).
---
 .../migrate-jetpack-components-to-wp-ui       |  4 +++
 .../components/connect-button/index.jsx       | 18 ++++++----
 .../connect-screen/basic/visual.tsx           | 20 ++++++-----
 .../connect-screen/required-plan/visual.jsx   | 35 +++++++++----------
 .../manage-connection-dialog/index.jsx        |  7 ++--
 5 files changed, 46 insertions(+), 38 deletions(-)
 create mode 100644 projects/js-packages/connection/changelog/migrate-jetpack-components-to-wp-ui

diff --git a/projects/js-packages/connection/changelog/migrate-jetpack-components-to-wp-ui b/projects/js-packages/connection/changelog/migrate-jetpack-components-to-wp-ui
new file mode 100644
index 000000000000..04bb0cf8a488
--- /dev/null
+++ b/projects/js-packages/connection/changelog/migrate-jetpack-components-to-wp-ui
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Connection: Migrate ActionButton, Button, and Text consumers off @automattic/jetpack-components to @wordpress/ui equivalents; brings the package to zero migration-relevant jetpack-components imports.
diff --git a/projects/js-packages/connection/components/connect-button/index.jsx b/projects/js-packages/connection/components/connect-button/index.jsx
index a7ea9e0cd73d..c0c71a26829d 100644
--- a/projects/js-packages/connection/components/connect-button/index.jsx
+++ b/projects/js-packages/connection/components/connect-button/index.jsx
@@ -1,5 +1,5 @@
-import { ActionButton } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
 import PropTypes from 'prop-types';
 import useConnection from '../use-connection';
 
@@ -39,12 +39,16 @@ const ConnectButton = props => {
 	return (
 		<>
 			{ ( ! isRegistered || ! isUserConnected ) && (
-				<ActionButton
-					label={ connectLabel }
-					onClick={ handleRegisterSite }
-					displayError={ registrationError ? true : false }
-					isLoading={ siteIsRegistering || userIsConnecting }
-				/>
+				<>
+					<Button onClick={ handleRegisterSite } loading={ siteIsRegistering || userIsConnecting }>
+						{ connectLabel }
+					</Button>
+					{ registrationError && (
+						<p className="jp-action-button__error">
+							{ __( 'An error occurred. Please try again.', 'jetpack-connection-js' ) }
+						</p>
+					) }
+				</>
 			) }
 		</>
 	);
diff --git a/projects/js-packages/connection/components/connect-screen/basic/visual.tsx b/projects/js-packages/connection/components/connect-screen/basic/visual.tsx
index ced409b3d80b..d0a929a5a973 100644
--- a/projects/js-packages/connection/components/connect-screen/basic/visual.tsx
+++ b/projects/js-packages/connection/components/connect-screen/basic/visual.tsx
@@ -1,6 +1,7 @@
-import { ActionButton, TermsOfService, getRedirectUrl } from '@automattic/jetpack-components';
+import { TermsOfService, getRedirectUrl } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
 import ConnectScreenLayout from '../layout';
 import type { Props as ConnectScreenProps } from '../basic';
 import type { WithRequired } from '../types';
@@ -102,14 +103,15 @@ const ConnectScreenVisual: FC< Props > = ( {
 			<div className="jp-connection__connect-screen__tos">
 				<TermsOfService agreeButtonLabel={ buttonLabel } />
 			</div>
-			<ActionButton
-				label={ buttonLabel }
-				onClick={ handleButtonClick }
-				displayError={ displayButtonError || isOfflineMode }
-				errorMessage={ getErrorMessage( errorCode, isOfflineMode ) }
-				isLoading={ buttonIsLoading }
-				isDisabled={ isOfflineMode }
-			/>
+			<Button onClick={ handleButtonClick } loading={ buttonIsLoading } disabled={ isOfflineMode }>
+				{ buttonLabel }
+			</Button>
+			{ ( displayButtonError || isOfflineMode ) && (
+				<p className="jp-action-button__error">
+					{ getErrorMessage( errorCode, isOfflineMode ) ||
+						__( 'An error occurred. Please try again.', 'jetpack-connection-js' ) }
+				</p>
+			) }
 			<span className="jp-connection__connect-screen__loading-message" role="status">
 				{ buttonIsLoading ? loadingLabel || __( 'Loading', 'jetpack-connection-js' ) : '' }
 			</span>
diff --git a/projects/js-packages/connection/components/connect-screen/required-plan/visual.jsx b/projects/js-packages/connection/components/connect-screen/required-plan/visual.jsx
index 3ea0d9243deb..c0c8c62da39c 100644
--- a/projects/js-packages/connection/components/connect-screen/required-plan/visual.jsx
+++ b/projects/js-packages/connection/components/connect-screen/required-plan/visual.jsx
@@ -1,11 +1,7 @@
-import {
-	ActionButton,
-	getRedirectUrl,
-	PricingCard,
-	TermsOfService,
-} from '@automattic/jetpack-components';
+import { getRedirectUrl, PricingCard, TermsOfService } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
 import clsx from 'clsx';
 import debugFactory from 'debug';
 import PropTypes from 'prop-types';
@@ -45,11 +41,9 @@ const ConnectScreenRequiredPlanVisual = props => {
 		__( 'Already have a subscription? <connectButton/>', 'jetpack-connection-js' ),
 		{
 			connectButton: (
-				<ActionButton
-					label={ __( 'Log in to get started', 'jetpack-connection-js' ) }
-					onClick={ handleButtonClick }
-					isLoading={ buttonIsLoading }
-				/>
+				<Button onClick={ handleButtonClick } loading={ buttonIsLoading }>
+					{ __( 'Log in to get started', 'jetpack-connection-js' ) }
+				</Button>
 			),
 		}
 	);
@@ -92,14 +86,19 @@ const ConnectScreenRequiredPlanVisual = props => {
 						priceAfter={ priceAfter }
 					>
 						<TermsOfService agreeButtonLabel={ buttonLabel } />
-						<ActionButton
-							label={ buttonLabel }
+						<Button
 							onClick={ handleButtonClick }
-							displayError={ displayButtonError || isOfflineMode }
-							errorMessage={ errorMessage }
-							isLoading={ buttonIsLoading }
-							isDisabled={ isOfflineMode }
-						/>
+							loading={ buttonIsLoading }
+							disabled={ isOfflineMode }
+						>
+							{ buttonLabel }
+						</Button>
+						{ ( displayButtonError || isOfflineMode ) && (
+							<p className="jp-action-button__error">
+								{ errorMessage ||
+									__( 'An error occurred. Please try again.', 'jetpack-connection-js' ) }
+							</p>
+						) }
 					</PricingCard>
 				</div>
 
diff --git a/projects/js-packages/connection/components/manage-connection-dialog/index.jsx b/projects/js-packages/connection/components/manage-connection-dialog/index.jsx
index 578c38ac16ef..7932435d751d 100644
--- a/projects/js-packages/connection/components/manage-connection-dialog/index.jsx
+++ b/projects/js-packages/connection/components/manage-connection-dialog/index.jsx
@@ -3,13 +3,13 @@
  */
 import jetpackAnalytics from '@automattic/jetpack-analytics';
 import restApi from '@automattic/jetpack-api';
-import { Button, getRedirectUrl, Text } from '@automattic/jetpack-components';
+import { getRedirectUrl } from '@automattic/jetpack-components';
 import { isWoASite } from '@automattic/jetpack-script-data';
 import { Modal } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, chevronRight, external } from '@wordpress/icons';
-import { Link } from '@wordpress/ui';
+import { Button, Link, Text } from '@wordpress/ui';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { useCallback, useEffect, useState, useMemo } from 'react';
@@ -316,8 +316,7 @@ const HelpFooter = ( { onClose, disabled } ) => {
 			</div>
 			<div className="jp-connection__manage-dialog__button-wrap lg-col-span-3 md-col-span-1 sm-col-span-1">
 				<Button
-					weight="regular"
-					variant="secondary"
+					variant="outline"
 					onClick={ onClose }
 					className="jp-connection__manage-dialog__btn-dismiss"
 					disabled={ disabled }

From 59ef0139a414ea511168ac58cce349999e98860e Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 22 May 2026 12:50:10 -0300
Subject: [PATCH 2/4] Connection: revert ConnectScreen Basic + RequiredPlan
 ActionButton migrations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

These three call sites depend on SCSS rules in
`connect-screen/required-plan/style.scss` (lines 46 + 80) and
`connect-screen/basic/style.scss` (line 20) that key on the
`.jp-action-button--button.components-button` class combination — added by
jetpack-components ActionButton and `@wordpress/components` Button. The
@wordpress/ui Button doesn't add those classes, so the rules silently
stop matching:

* RequiredPlan "Get Jetpack Backup" inside PricingCard — lost
  `width: 100%`, `background: var(--jp-black)`, `color: var(--jp-white)`,
  padding, border-radius, font-size + font-weight overrides. Rendered
  as a content-width default-blue `@wordpress/ui` Button instead of the
  expected full-width black CTA.
* RequiredPlan inline "Log in to get started" — lost
  `display: inline`, `background: inherit`, `text-decoration: underline`
  text-link treatment. Rendered as a primary-filled rectangular Button
  inside the otherwise-text paragraph.
* Basic "Set up Jetpack" — lost the `.jp-action-button` wrapper +
  `--button` modifier rules (border-radius, font-weight, responsive
  max-width).

Reverting these three call sites to `ActionButton` preserves the SCSS
contract. The connect-button + manage-connection-dialog migrations in
this PR stay on `@wordpress/ui` (no SCSS coupling there). A follow-up
slice can refactor the SCSS to decouple from the now-internal jetpack
class hooks, then re-migrate.
---
 .../connect-screen/basic/visual.tsx           | 20 +++++------
 .../connect-screen/required-plan/visual.jsx   | 35 ++++++++++---------
 2 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/projects/js-packages/connection/components/connect-screen/basic/visual.tsx b/projects/js-packages/connection/components/connect-screen/basic/visual.tsx
index d0a929a5a973..ced409b3d80b 100644
--- a/projects/js-packages/connection/components/connect-screen/basic/visual.tsx
+++ b/projects/js-packages/connection/components/connect-screen/basic/visual.tsx
@@ -1,7 +1,6 @@
-import { TermsOfService, getRedirectUrl } from '@automattic/jetpack-components';
+import { ActionButton, TermsOfService, getRedirectUrl } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/ui';
 import ConnectScreenLayout from '../layout';
 import type { Props as ConnectScreenProps } from '../basic';
 import type { WithRequired } from '../types';
@@ -103,15 +102,14 @@ const ConnectScreenVisual: FC< Props > = ( {
 			<div className="jp-connection__connect-screen__tos">
 				<TermsOfService agreeButtonLabel={ buttonLabel } />
 			</div>
-			<Button onClick={ handleButtonClick } loading={ buttonIsLoading } disabled={ isOfflineMode }>
-				{ buttonLabel }
-			</Button>
-			{ ( displayButtonError || isOfflineMode ) && (
-				<p className="jp-action-button__error">
-					{ getErrorMessage( errorCode, isOfflineMode ) ||
-						__( 'An error occurred. Please try again.', 'jetpack-connection-js' ) }
-				</p>
-			) }
+			<ActionButton
+				label={ buttonLabel }
+				onClick={ handleButtonClick }
+				displayError={ displayButtonError || isOfflineMode }
+				errorMessage={ getErrorMessage( errorCode, isOfflineMode ) }
+				isLoading={ buttonIsLoading }
+				isDisabled={ isOfflineMode }
+			/>
 			<span className="jp-connection__connect-screen__loading-message" role="status">
 				{ buttonIsLoading ? loadingLabel || __( 'Loading', 'jetpack-connection-js' ) : '' }
 			</span>
diff --git a/projects/js-packages/connection/components/connect-screen/required-plan/visual.jsx b/projects/js-packages/connection/components/connect-screen/required-plan/visual.jsx
index c0c8c62da39c..3ea0d9243deb 100644
--- a/projects/js-packages/connection/components/connect-screen/required-plan/visual.jsx
+++ b/projects/js-packages/connection/components/connect-screen/required-plan/visual.jsx
@@ -1,7 +1,11 @@
-import { getRedirectUrl, PricingCard, TermsOfService } from '@automattic/jetpack-components';
+import {
+	ActionButton,
+	getRedirectUrl,
+	PricingCard,
+	TermsOfService,
+} from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/ui';
 import clsx from 'clsx';
 import debugFactory from 'debug';
 import PropTypes from 'prop-types';
@@ -41,9 +45,11 @@ const ConnectScreenRequiredPlanVisual = props => {
 		__( 'Already have a subscription? <connectButton/>', 'jetpack-connection-js' ),
 		{
 			connectButton: (
-				<Button onClick={ handleButtonClick } loading={ buttonIsLoading }>
-					{ __( 'Log in to get started', 'jetpack-connection-js' ) }
-				</Button>
+				<ActionButton
+					label={ __( 'Log in to get started', 'jetpack-connection-js' ) }
+					onClick={ handleButtonClick }
+					isLoading={ buttonIsLoading }
+				/>
 			),
 		}
 	);
@@ -86,19 +92,14 @@ const ConnectScreenRequiredPlanVisual = props => {
 						priceAfter={ priceAfter }
 					>
 						<TermsOfService agreeButtonLabel={ buttonLabel } />
-						<Button
+						<ActionButton
+							label={ buttonLabel }
 							onClick={ handleButtonClick }
-							loading={ buttonIsLoading }
-							disabled={ isOfflineMode }
-						>
-							{ buttonLabel }
-						</Button>
-						{ ( displayButtonError || isOfflineMode ) && (
-							<p className="jp-action-button__error">
-								{ errorMessage ||
-									__( 'An error occurred. Please try again.', 'jetpack-connection-js' ) }
-							</p>
-						) }
+							displayError={ displayButtonError || isOfflineMode }
+							errorMessage={ errorMessage }
+							isLoading={ buttonIsLoading }
+							isDisabled={ isOfflineMode }
+						/>
 					</PricingCard>
 				</div>
 

From e9fa5c6c7fe86895b5df3337e066d84a931d9f8d Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 22 May 2026 13:43:47 -0300
Subject: [PATCH 3/4] Connection: re-migrate ConnectScreen Basic + RequiredPlan
 to @wordpress/ui with default styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This supersedes the previous revert (d10b42671fc) and ships the proper
@wordpress/ui migration for the three call sites that had been reverted
because their SCSS rules were tightly coupled to the old class hooks
(`.jp-action-button--button.components-button` and friends).

Visual contract follows the user's clarified migration philosophy:
default @wordpress/ui Button styling for colors / padding / font-size /
border-radius / spinner, with consumer-side SCSS ONLY for structural
exceptions (full-width inside the PricingCard, top margin on the
basic-screen CTA, responsive max-width). The previous Jetpack-brand
overrides (`background: var(--jp-black) !important`, `color:
var(--jp-white) !important`) are dropped — WPDS handles those.

* **"Get Jetpack Backup" inside PricingCard** (required-plan/visual.jsx):
  - `@wordpress/ui` Button (default solid + brand), `loading` prop for
    in-flight feedback (WPDS-styled spinner shows correctly because the
    button keeps its default chrome).
  - New stable className `jp-connection__connect-screen__action-button`
    targeting only `width: 100%` and the vertical rhythm margin.

* **"Log in to get started" inline button** (required-plan/visual.jsx):
  - `@wordpress/ui` Button `variant="unstyled"` styled as an inline
    text link via SCSS (`.jp-connection__connect-screen__inline-action`).
    `<button>` element preserves keyboard semantics + a11y; `aria-busy`
    announces in-flight to screen readers.
  - `variant="unstyled"` strips Button's own loading visual, so we
    inject a `@wordpress/components` Spinner via children — matches
    ActionButton's original "replace label with spinner" behavior.
  - SCSS aligns the spinner to the prefix-text baseline using
    `inline-flex` + `align-items: center` + `align-self: baseline`, and
    zeros out the Spinner's default `5px 11px 0` margin (which existed
    for the chrome we no longer have).

* **"Set up Jetpack" basic CTA** (basic/visual.tsx):
  - `@wordpress/ui` Button (default solid + brand) + same className hook
    as RequiredPlan. SCSS keeps only the structural `margin-top: 40px`
    and the responsive `max-width` breakpoint that goes full-width on
    mobile.

SCSS dead-code removed:
* The old `.jp-action-button--button.components-button` selectors at
  required-plan/style.scss:46 and basic/style.scss:20.
* The `.jp-action-button--button.components-button.is-primary`
  inline-text-link override at required-plan/style.scss:80.
* The `.jp-components-spinner__inner / __outer` color overrides at
  required-plan/style.scss:103.

Visually verified in storybook (both Default and Connecting states for
the required-plan screen).
---
 .../connect-screen/basic/style.scss           | 25 +++-----
 .../connect-screen/basic/visual.tsx           | 23 ++++---
 .../connect-screen/required-plan/style.scss   | 61 +++++++------------
 .../connect-screen/required-plan/visual.jsx   | 41 +++++++------
 4 files changed, 70 insertions(+), 80 deletions(-)

diff --git a/projects/js-packages/connection/components/connect-screen/basic/style.scss b/projects/js-packages/connection/components/connect-screen/basic/style.scss
index d8aad6506f52..0f3bcebd2b61 100644
--- a/projects/js-packages/connection/components/connect-screen/basic/style.scss
+++ b/projects/js-packages/connection/components/connect-screen/basic/style.scss
@@ -17,25 +17,16 @@
 		}
 	}
 
-	.jp-action-button {
+	// Structural-only: top spacing + responsive width. All other treatment
+	// (colors, padding, border-radius, font-weight) honors the
+	// @wordpress/ui Button defaults.
+	.jp-connection__connect-screen__action-button {
 		margin-top: 40px;
+		max-width: 100%;
 
-		&--button {
-			border-radius: 4px;
-			font-weight: 600;
-		}
-
-		button {
-			max-width: 100%;
-
-			&:disabled {
-				color: hsla(0, 0%, 100%, 0.4);
-			}
-
-			@media ( max-width: breakpoints.$break-medium ) {
-				max-width: none;
-				width: 100%;
-			}
+		@media ( max-width: breakpoints.$break-medium ) {
+			max-width: none;
+			width: 100%;
 		}
 	}
 
diff --git a/projects/js-packages/connection/components/connect-screen/basic/visual.tsx b/projects/js-packages/connection/components/connect-screen/basic/visual.tsx
index ced409b3d80b..9bb11cd568df 100644
--- a/projects/js-packages/connection/components/connect-screen/basic/visual.tsx
+++ b/projects/js-packages/connection/components/connect-screen/basic/visual.tsx
@@ -1,6 +1,7 @@
-import { ActionButton, TermsOfService, getRedirectUrl } from '@automattic/jetpack-components';
+import { TermsOfService, getRedirectUrl } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
 import ConnectScreenLayout from '../layout';
 import type { Props as ConnectScreenProps } from '../basic';
 import type { WithRequired } from '../types';
@@ -102,14 +103,20 @@ const ConnectScreenVisual: FC< Props > = ( {
 			<div className="jp-connection__connect-screen__tos">
 				<TermsOfService agreeButtonLabel={ buttonLabel } />
 			</div>
-			<ActionButton
-				label={ buttonLabel }
+			<Button
+				className="jp-connection__connect-screen__action-button"
 				onClick={ handleButtonClick }
-				displayError={ displayButtonError || isOfflineMode }
-				errorMessage={ getErrorMessage( errorCode, isOfflineMode ) }
-				isLoading={ buttonIsLoading }
-				isDisabled={ isOfflineMode }
-			/>
+				loading={ buttonIsLoading }
+				disabled={ isOfflineMode }
+			>
+				{ buttonLabel }
+			</Button>
+			{ ( displayButtonError || isOfflineMode ) && (
+				<p className="jp-connection__connect-screen__error">
+					{ getErrorMessage( errorCode, isOfflineMode ) ||
+						__( 'An error occurred. Please try again.', 'jetpack-connection-js' ) }
+				</p>
+			) }
 			<span className="jp-connection__connect-screen__loading-message" role="status">
 				{ buttonIsLoading ? loadingLabel || __( 'Loading', 'jetpack-connection-js' ) : '' }
 			</span>
diff --git a/projects/js-packages/connection/components/connect-screen/required-plan/style.scss b/projects/js-packages/connection/components/connect-screen/required-plan/style.scss
index 89c53b2084fa..6e771e085904 100644
--- a/projects/js-packages/connection/components/connect-screen/required-plan/style.scss
+++ b/projects/js-packages/connection/components/connect-screen/required-plan/style.scss
@@ -43,23 +43,12 @@
 			right: calc(var(--spacing-base) * 12);
 		}
 
-		.jp-action-button--button.components-button {
+		// Structural-only: span the pricing card width and keep the vertical
+		// rhythm inside the card. All other treatment (colors, padding,
+		// font-size, border-radius) honors the @wordpress/ui Button defaults.
+		.jp-connection__connect-screen__action-button {
 			width: 100%;
-			height: auto;
-			font-size: 18px;
-			font-weight: 500;
-			background: var(--jp-black) !important;
-			color: var(--jp-white) !important;
-			border-radius: var(--jp-border-radius);
-			padding: 14px 24px;
-			margin: 24px 0 32px;
-			justify-content: center;
-			align-items: center;
-
-			&:disabled {
-				background: var(--jp-gray) !important;
-				color: var(--jp-gray-20) !important;
-			}
+			margin: 24px 0;
 		}
 
 		.terms-of-service {
@@ -77,33 +66,29 @@
 		gap: 1ch;
 		line-height: 1;
 
-		.jp-action-button--button.components-button.is-primary {
-			display: inline;
-			color: var(--jp-black) !important;
-			background: inherit !important;
+		// Inline button styled as a text link inside the surrounding sentence.
+		// `variant="unstyled"` strips @wordpress/ui Button's chrome so we can
+		// flow it inline with the prefix copy; we keep `<button>` semantics so
+		// the element stays keyboard-focusable and screen readers announce
+		// "button" + aria-busy when in-flight (a `<Link>` couldn't do that).
+		// `inline-flex` + `align-items: center` keeps either the label or the
+		// loading spinner vertically centered within the button row, and
+		// `align-self: baseline` aligns the whole button with the prefix
+		// text's baseline inside the parent flex container.
+		.jp-connection__connect-screen__inline-action {
+			display: inline-flex;
+			align-items: center;
+			align-self: baseline;
 			text-decoration: underline;
-
-			width: auto;
-			min-width: 0;
-			height: auto;
 			font: inherit;
 			padding: 0;
 
-			&:hover {
-				background: inherit;
-				text-decoration-thickness: var(--jp-underline-thickness);
+			// @wordpress/components Spinner ships with `margin: 5px 11px 0`
+			// for use inside button chrome we no longer have. Zero it out
+			// so the spinner sits flush in the inline-flex row.
+			.components-spinner {
+				margin: 0;
 			}
-
-			&:focus {
-				background: inherit;
-				box-shadow: none !important;
-			}
-		}
-
-		.jp-components-spinner__inner,
-		.jp-components-spinner__outer {
-			border-top-color: var(--jp-black);
-			border-right-color: var(--jp-black);
 		}
 	}
 }
diff --git a/projects/js-packages/connection/components/connect-screen/required-plan/visual.jsx b/projects/js-packages/connection/components/connect-screen/required-plan/visual.jsx
index 3ea0d9243deb..4b757b7e6eb4 100644
--- a/projects/js-packages/connection/components/connect-screen/required-plan/visual.jsx
+++ b/projects/js-packages/connection/components/connect-screen/required-plan/visual.jsx
@@ -1,11 +1,8 @@
-import {
-	ActionButton,
-	getRedirectUrl,
-	PricingCard,
-	TermsOfService,
-} from '@automattic/jetpack-components';
+import { getRedirectUrl, PricingCard, TermsOfService } from '@automattic/jetpack-components';
+import { Spinner } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
 import clsx from 'clsx';
 import debugFactory from 'debug';
 import PropTypes from 'prop-types';
@@ -45,11 +42,15 @@ const ConnectScreenRequiredPlanVisual = props => {
 		__( 'Already have a subscription? <connectButton/>', 'jetpack-connection-js' ),
 		{
 			connectButton: (
-				<ActionButton
-					label={ __( 'Log in to get started', 'jetpack-connection-js' ) }
+				<Button
+					variant="unstyled"
+					className="jp-connection__connect-screen__inline-action"
 					onClick={ handleButtonClick }
-					isLoading={ buttonIsLoading }
-				/>
+					disabled={ buttonIsLoading }
+					aria-busy={ buttonIsLoading }
+				>
+					{ buttonIsLoading ? <Spinner /> : __( 'Log in to get started', 'jetpack-connection-js' ) }
+				</Button>
 			),
 		}
 	);
@@ -92,14 +93,20 @@ const ConnectScreenRequiredPlanVisual = props => {
 						priceAfter={ priceAfter }
 					>
 						<TermsOfService agreeButtonLabel={ buttonLabel } />
-						<ActionButton
-							label={ buttonLabel }
+						<Button
+							className="jp-connection__connect-screen__action-button"
 							onClick={ handleButtonClick }
-							displayError={ displayButtonError || isOfflineMode }
-							errorMessage={ errorMessage }
-							isLoading={ buttonIsLoading }
-							isDisabled={ isOfflineMode }
-						/>
+							loading={ buttonIsLoading }
+							disabled={ isOfflineMode }
+						>
+							{ buttonLabel }
+						</Button>
+						{ ( displayButtonError || isOfflineMode ) && (
+							<p className="jp-connection__connect-screen__error">
+								{ errorMessage ||
+									__( 'An error occurred. Please try again.', 'jetpack-connection-js' ) }
+							</p>
+						) }
 					</PricingCard>
 				</div>
 

From 0b1cca5ef7ba62501043a29599523a7cee4b6d85 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 22 May 2026 15:50:56 -0300
Subject: [PATCH 4/4] Connection: stabilize inline-action width to prevent
 text-row reflow on loading

Adds `min-width: calc(var(--spacing-base) * 8)` and `justify-content:
center` to `.jp-connection__connect-screen__inline-action` so the
button reserves a fixed minimum width and centers its content. Without
this, swapping the children between the (longer) label and the
(narrower) spinner during loading caused the surrounding sentence row
to reflow visibly. Tracking the user-applied tweak in this commit.
---
 .../components/connect-screen/required-plan/style.scss          | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/projects/js-packages/connection/components/connect-screen/required-plan/style.scss b/projects/js-packages/connection/components/connect-screen/required-plan/style.scss
index 6e771e085904..c9aa79784d06 100644
--- a/projects/js-packages/connection/components/connect-screen/required-plan/style.scss
+++ b/projects/js-packages/connection/components/connect-screen/required-plan/style.scss
@@ -82,6 +82,8 @@
 			text-decoration: underline;
 			font: inherit;
 			padding: 0;
+			min-width: calc(var(--spacing-base) * 8);
+			justify-content: center;
 
 			// @wordpress/components Spinner ships with `margin: 5px 11px 0`
 			// for use inside button chrome we no longer have. Zero it out