diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/more-requests.jsx b/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/more-requests.jsx
index 49154c2e3e74..ad341bf1fa5d 100644
--- a/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/more-requests.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/more-requests.jsx
@@ -3,7 +3,6 @@
*/
import {
AdminPage,
- Button,
Col,
Container,
Text,
@@ -11,6 +10,7 @@ import {
getRedirectUrl,
} from '@automattic/jetpack-components';
import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
import clsx from 'clsx';
import { useCallback } from 'react';
import { Link } from 'react-router';
@@ -66,12 +66,20 @@ export function JetpackAIInterstitialMoreRequests( { onClickGoBack = () => {} }
{ title }
{ longDescription }
-
-
- { __( 'Back', 'jetpack-my-jetpack' ) }
-
+ }
+ >
+ { __( 'Back', 'jetpack-my-jetpack' ) }
+
diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial/pricing-interstitial.jsx b/projects/packages/my-jetpack/_inc/components/product-interstitial/pricing-interstitial.jsx
index 0bb2577320bf..30ce78a7c1b5 100644
--- a/projects/packages/my-jetpack/_inc/components/product-interstitial/pricing-interstitial.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-interstitial/pricing-interstitial.jsx
@@ -3,7 +3,6 @@
*/
import {
AdminPage,
- Button,
Col,
Container,
PricingTable,
@@ -14,8 +13,9 @@ import {
} from '@automattic/jetpack-components';
import { useProductCheckoutWorkflow } from '@automattic/jetpack-connection';
import { getScriptData, getMyJetpackUrl } from '@automattic/jetpack-script-data';
-import { Button as WPButton, Spinner } from '@wordpress/components';
+import { Spinner } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
import { useCallback, useEffect, useMemo, useState } from 'react';
/**
* Internal dependencies
@@ -388,14 +388,15 @@ export default function PricingInterstitial( { slug } ) {
/>
}
actions={
- }
onClick={ handleLicenseActivationClick }
>
{ __( 'Use license key', 'jetpack-my-jetpack' ) }
-
+
}
>
{ config.tiers.free.cta }
@@ -458,9 +459,9 @@ export default function PricingInterstitial( { slug } ) {
) }
{ config.tiers.paid.cta }
@@ -489,10 +490,10 @@ export default function PricingInterstitial( { slug } ) {
) }
{ config.tiers.bundle.cta }
diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial/product-interstitial.jsx b/projects/packages/my-jetpack/_inc/components/product-interstitial/product-interstitial.jsx
index c8ca655a615c..16c10340f740 100644
--- a/projects/packages/my-jetpack/_inc/components/product-interstitial/product-interstitial.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-interstitial/product-interstitial.jsx
@@ -3,8 +3,8 @@
*/
import { AdminPage, Col, Container, TermsOfService } from '@automattic/jetpack-components';
import { getMyJetpackUrl } from '@automattic/jetpack-script-data';
-import { Button as WPButton } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
import clsx from 'clsx';
import { useCallback, useEffect } from 'react';
/**
@@ -205,9 +205,14 @@ export default function ProductInterstitial( {
}
actions={
existingLicenseKeyUrl ? (
-
+ }
+ >
{ __( 'Use license key', 'jetpack-my-jetpack' ) }
-
+
) : null
}
>
diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial/style.module.scss b/projects/packages/my-jetpack/_inc/components/product-interstitial/style.module.scss
index 54d0f42fa8af..3d103d5e0c9b 100644
--- a/projects/packages/my-jetpack/_inc/components/product-interstitial/style.module.scss
+++ b/projects/packages/my-jetpack/_inc/components/product-interstitial/style.module.scss
@@ -49,6 +49,11 @@
}
}
+.tier-cta {
+ width: 100%;
+ justify-content: center;
+}
+
.not-strong {
font-weight: 400 !important;
}
diff --git a/projects/packages/my-jetpack/changelog/feat-interstitial-buttons-wp-ui b/projects/packages/my-jetpack/changelog/feat-interstitial-buttons-wp-ui
new file mode 100644
index 000000000000..3004ed0af555
--- /dev/null
+++ b/projects/packages/my-jetpack/changelog/feat-interstitial-buttons-wp-ui
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Migrate interstitial Buttons from `@automattic/jetpack-components` and `@wordpress/components` to `@wordpress/ui`.