Automattic · CGastrell · May 22, 2026 · Apr 18, 2026
diff --git a/projects/packages/my-jetpack/_inc/components/connected-product-card/index.tsx b/projects/packages/my-jetpack/_inc/components/connected-product-card/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Text } from '@automattic/jetpack-components';
+import { Text } from '@wordpress/ui';
 import { useEffect } from 'react';
 /**
  * Internal dependencies
@@ -56,7 +56,7 @@ const ConnectedProductCard: FC< ConnectedProductCardProps > = ( {
 		const cardDescription = preventWidows( defaultDescription );
 
 		return (
-			<Text variant="body-small" style={ { flexGrow: 1, marginBottom: '1rem' } }>
+			<Text variant="body-sm" style={ { flexGrow: 1, marginBottom: '1rem' } }>
 				{ cardDescription }
 			</Text>
 		);

diff --git a/projects/packages/my-jetpack/_inc/components/connection-status-card/index.tsx b/projects/packages/my-jetpack/_inc/components/connection-status-card/index.tsx
@@ -1,9 +1,9 @@
-import { Text } from '@automattic/jetpack-components';
 import { CONNECTION_STORE_ID, ManageConnectionDialog } from '@automattic/jetpack-connection';
 import { currentUserCan, isWoASite } from '@automattic/jetpack-script-data';
 import { Button } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { Text } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useCallback, useMemo, useState } from 'react';
 import { useAllProducts } from '../../data/products/use-all-products';
@@ -171,7 +171,7 @@ const ConnectionStatusCard: ConnectionStatusCardType = ( {
 					</Button>
 				</h4>
 				<div>
-					<Text variant="body" className={ styles.description }>
+					<Text variant="body-md" className={ styles.description }>
 						{ state.description }
 					</Text>
 					{ state.action === 'CONNECT_USER' ? (

diff --git a/projects/packages/my-jetpack/_inc/components/plans-section/index.tsx b/projects/packages/my-jetpack/_inc/components/plans-section/index.tsx
@@ -1,9 +1,10 @@
-import { Button, Text } from '@automattic/jetpack-components';
+// 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';
 import { __, _n, _x, sprintf } from '@wordpress/i18n';
-import { Link } from '@wordpress/ui';
+import { Link, Text } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useCallback } from 'react';
 import { PRODUCT_STATUSES } from '../../constants';
@@ -124,7 +125,7 @@ const PlanExpiry: FC< PlanSectionProps > = ( { purchase } ) => {
 
 	if ( isLifetimePurchase( purchase ) ) {
 		return (
-			<Text variant="body" className={ styles[ 'expire-date' ] }>
+			<Text variant="body-md" className={ styles[ 'expire-date' ] }>
 				<span className={ styles[ 'expire-date--with-icon' ] }>
 					{ __( 'Never Expires', 'jetpack-my-jetpack' ) }
 				</span>
@@ -135,7 +136,7 @@ const PlanExpiry: FC< PlanSectionProps > = ( { purchase } ) => {
 
 	return (
 		<>
-			<Text variant="body" className={ clsx( styles[ 'expire-date' ], expiryMessageClassName ) }>
+			<Text variant="body-md" className={ clsx( styles[ 'expire-date' ], expiryMessageClassName ) }>
 				{ expiryMessage() }
 			</Text>
 			{ isExpiringPurchase && <Text>{ expiryAction() }</Text> }
@@ -324,7 +325,7 @@ const PlansSection: FC = () => {
 									/>
 								</svg>
 							</h4>
-							<Text variant="body" className={ clsx( styles[ 'expire-date' ] ) }>
+							<Text variant="body-md" className={ clsx( styles[ 'expire-date' ] ) }>
 								{ __( 'Free', 'jetpack-my-jetpack' ) }
 							</Text>
 						</section>

diff --git a/projects/packages/my-jetpack/_inc/components/product-card/recommendation-actions.tsx b/projects/packages/my-jetpack/_inc/components/product-card/recommendation-actions.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@automattic/jetpack-components';
+import { Button } from '@wordpress/ui';
 import clsx from 'clsx';
 import styles from './style.module.scss';
 import usePricingData from './use-pricing-data';
@@ -20,7 +20,7 @@ const RecommendationActions = ( { slug }: { slug: string } ) => {
 					</Button>
 				) }
 				{ secondaryAction && (
-					<Button size="small" variant="secondary" disabled={ isActivating } { ...secondaryAction }>
+					<Button size="small" variant="outline" disabled={ isActivating } { ...secondaryAction }>
 						{ secondaryAction.label }
 					</Button>
 				) }

diff --git a/projects/packages/my-jetpack/_inc/components/product-card/status.tsx b/projects/packages/my-jetpack/_inc/components/product-card/status.tsx
@@ -1,5 +1,5 @@
-import { Text } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
+import { Text } from '@wordpress/ui';
 import clsx from 'clsx';
 import { PRODUCT_STATUSES } from '../../constants';
 import styles from './style.module.scss';
@@ -113,7 +113,7 @@ const Status: FC< StatusProps > = ( {
 	);
 
 	return (
-		<Text variant="label" className={ statusClassName }>
+		<Text variant="body-sm" className={ statusClassName }>
 			{ flagLabel }
 		</Text>
 	);

diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card/index.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card/index.jsx
@@ -1,7 +1,7 @@
-import { Text, getRedirectUrl } from '@automattic/jetpack-components';
+import { getRedirectUrl } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { Link } from '@wordpress/ui';
+import { Link, Text } from '@wordpress/ui';
 import Gridicon from 'gridicons';
 import PropTypes from 'prop-types';
 import { PRODUCT_STATUSES } from '../../../constants';
@@ -115,7 +115,7 @@ const BackupCard = props => {
 			{ isDeactivated && ! isBackupFailedReasonLoading && (
 				<div className={ styles.backupErrorContainer }>
 					<div className={ styles.contentContainer }>
-						<Text variant="body-small">
+						<Text variant="body-sm">
 							{ createInterpolateElement(
 								__(
 									'Backup was manually turned off. Please <a>contact support</a> to reactivate it.',
@@ -135,7 +135,7 @@ const BackupCard = props => {
 						<Gridicon icon="notice" size={ 16 } className={ styles.iconError } />
 					</div>
 					<div className={ styles.contentContainer }>
-						<Text variant="body-small" className="value-section__heading">
+						<Text variant="body-sm" className="value-section__heading">
 							{ __( 'The last backup attempt failed.', 'jetpack-my-jetpack' ) }
 							<InfoTooltip
 								tracksEventName={ 'backup_card_tooltip_open' }
@@ -159,7 +159,7 @@ const BackupCard = props => {
 								</>
 							</InfoTooltip>
 						</Text>
-						<Text variant="body-small" className={ styles.error_description }>
+						<Text variant="body-sm" className={ styles.error_description }>
 							{ __( 'Check out our troubleshooting guide.', 'jetpack-my-jetpack' ) }
 						</Text>
 					</div>
@@ -203,7 +203,7 @@ const WithBackupsValueSection = props => {
 	};
 
 	const WithBackupsDescription = () => (
-		<Text variant="body-small" className={ styles.description }>
+		<Text variant="body-sm" className={ styles.description }>
 			<span>{ __( 'Activity Detected', 'jetpack-my-jetpack' ) }</span>
 			<span className={ styles.time }>
 				{ getTimeSinceLastRenewableEvent( lastRewindableEventTime ) }

diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/contextual-card-info.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/contextual-card-info.jsx
@@ -1,10 +1,11 @@
 /**
  * External dependencies
  */
-import { Text, LoadingPlaceholder } from '@automattic/jetpack-components';
+import { LoadingPlaceholder } from '@automattic/jetpack-components';
 import { formatNumberCompact } from '@automattic/number-formatters';
 import { __, sprintf } from '@wordpress/i18n';
 import { arrowUp, arrowDown, Icon } from '@wordpress/icons';
+import { Text } from '@wordpress/ui';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 /**

diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/index.tsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Text } from '@automattic/jetpack-components';
+import { Text } from '@wordpress/ui';
 import { useCallback, useMemo } from 'react';
 import { PRODUCT_STATUSES } from '../../../constants';
 import {
@@ -56,7 +56,7 @@ const VideopressCard: ProductCardComponent = props => {
 
 	const Description = useCallback( () => {
 		return (
-			<Text variant="body-small" className="description">
+			<Text variant="body-sm" className="description">
 				{ descriptionText || detail.description }
 				{ isPluginActive && ! videoCount && (
 					<InfoTooltip

diff --git a/projects/packages/my-jetpack/changelog/try-my-jetpack-overview-wp-ui b/projects/packages/my-jetpack/changelog/try-my-jetpack-overview-wp-ui
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Internal refactor to use core WordPress UI primitives. No user-facing change.
+
+