diff --git a/projects/packages/my-jetpack/_inc/components/plans-section/index.tsx b/projects/packages/my-jetpack/_inc/components/plans-section/index.tsx
index 3277569d2883..a37a2dd8ae25 100644
--- a/projects/packages/my-jetpack/_inc/components/plans-section/index.tsx
+++ b/projects/packages/my-jetpack/_inc/components/plans-section/index.tsx
@@ -1,5 +1,3 @@
-// TODO: migrate Button usages to @wordpress/ui Link (handled in a separate PR — all Buttons here use variant="link" + href + isExternalLink + weight="regular", which @wordpress/ui Button does not support).
-import { Button } from '@automattic/jetpack-components';
import { getUserConnectionUrl } from '@automattic/jetpack-connection';
import { getMyJetpackUrl } from '@automattic/jetpack-script-data';
import { dateI18n, getDate } from '@wordpress/date';
@@ -110,16 +108,16 @@ const PlanExpiry: FC< PlanSectionProps > = ( { purchase } ) => {
if ( isExpiringSoon ) {
return (
-
+
);
}
return (
-
+
);
}, [ isExpiringPurchase, isExpiringSoon, managePurchaseUrl, renewUrl ] );
@@ -243,39 +241,29 @@ const PlanSectionFooter: FC< PlanSectionHeaderAndFooterProps > = ( { numberOfPur
) }
{ numberOfPurchases > 0 && (
-
+
) }
{ ! hasComplete && (
-
+
) }
{ ! hasComplete && loadAddLicenseScreen && (
-
+
) }
diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-modal.tsx b/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-modal.tsx
index 095124878578..a465aa4476fb 100644
--- a/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-modal.tsx
+++ b/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-modal.tsx
@@ -1,6 +1,7 @@
import { Text, Button, ThemeProvider, Col, Container } from '@automattic/jetpack-components';
import { Modal } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
+import { Link } from '@wordpress/ui';
import clsx from 'clsx';
import { useCallback, useState, cloneElement } from 'react';
import LoadingBlock from '../loading-block';
@@ -234,13 +235,12 @@ const ProductInterstitialModal: FC< ProductInterstitialModalProps > = props => {
{ PrimaryButton }
-
+
{
diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/style.module.scss b/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/style.module.scss
index 9c4ba3981f94..bcddfbcbaef6 100644
--- a/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/style.module.scss
+++ b/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/style.module.scss
@@ -70,6 +70,7 @@ $interstitial-modal-padding: 40px;
.primary-footer {
display: flex;
flex-direction: row;
+ align-items: center;
gap: 8px 24px;
}
diff --git a/projects/packages/my-jetpack/changelog/update-link-variant-buttons-to-wp-ui-link b/projects/packages/my-jetpack/changelog/update-link-variant-buttons-to-wp-ui-link
new file mode 100644
index 000000000000..be9fb492b797
--- /dev/null
+++ b/projects/packages/my-jetpack/changelog/update-link-variant-buttons-to-wp-ui-link
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+My Jetpack: migrate link-variant Buttons in Plans section and product interstitial modal to @wordpress/ui Link.