Automattic · simison · May 29, 2026 · Apr 2, 2026 · Apr 2, 2026 · May 28, 2026
diff --git a/projects/packages/forms/changelog/update-forms-empty-state b/projects/packages/forms/changelog/update-forms-empty-state
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Update empty state to use component from wp-ui.
diff --git a/projects/packages/forms/routes/forms/stage.tsx b/projects/packages/forms/routes/forms/stage.tsx
@@ -14,14 +14,15 @@ import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
 import { useEffect, useMemo, useState, useCallback } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useSearch, useNavigate } from '@wordpress/route';
-import { Badge } from '@wordpress/ui';
+import { Badge, EmptyState } from '@wordpress/ui';
 import * as React from 'react';
 /**
  * Internal dependencies
  */
 import IntegrationsModal from '../../src/blocks/contact-form/components/jetpack-integrations-modal';
+import { icon as formBlockIcon } from '../../src/blocks/contact-form/icon.jsx';
 import CreateFormButton from '../../src/dashboard/components/create-form-button/index.tsx';
-import { EmptyWrapper, NoResults } from '../../src/dashboard/components/empty-responses/index.tsx';
+import { NoResults } from '../../src/dashboard/components/empty-responses/index.tsx';
 import { FormNameModal } from '../../src/dashboard/components/form-name-modal';
 import {
 	FORM_STATUSES,
@@ -612,13 +613,15 @@ function StageInner() {
 					hasActiveFilters ? (
 						<NoResults />
 					) : (
-						<EmptyWrapper
-							heading={ __( "You're set up. No forms yet.", 'jetpack-forms' ) }
-							body={ __(
-								'Create a form to manage and reuse it across your site.',
-								'jetpack-forms'
-							) }
-							actions={
+						<EmptyState.Root>
+							<EmptyState.Icon icon={ formBlockIcon } />
+							<EmptyState.Title>
+								{ __( "You're set up. No forms yet.", 'jetpack-forms' ) }
+							</EmptyState.Title>
+							<EmptyState.Description>
+								{ __( 'Create a form to manage and reuse it across your site.', 'jetpack-forms' ) }
+							</EmptyState.Description>
+							<EmptyState.Actions>
 								<HStack justify="center" spacing="2">
 									<CreateFormButton
 										label={ __( 'Create a new form', 'jetpack-forms' ) }
@@ -631,8 +634,8 @@ function StageInner() {
 										</Button>
 									) }
 								</HStack>
-							}
-						/>
+							</EmptyState.Actions>
+						</EmptyState.Root>
 					)
 				}
 				view={ view }

diff --git a/projects/packages/forms/src/blocks/contact-form/icon.jsx b/projects/packages/forms/src/blocks/contact-form/icon.jsx
@@ -0,0 +1,23 @@
+import { SVG, Path } from '@wordpress/primitives';
+
+export const icon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path fillRule="evenodd" clipRule="evenodd" d="M18 9H13V7.5H18V9Z" />
+		<Path fillRule="evenodd" clipRule="evenodd" d="M18 16.5H13V15H18V16.5Z" />
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M9.5 7.5H7.5V9.5H9.5V7.5ZM7.5 6H9.5C10.3284 6 11 6.67157 11 7.5V9.5C11 10.3284 10.3284 11 9.5 11H7.5C6.67157 11 6 10.3284 6 9.5V7.5C6 6.67157 6.67157 6 7.5 6Z"
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M9.5 14.5H7.5V16.5H9.5V14.5ZM7.5 13H9.5C10.3284 13 11 13.6716 11 14.5V16.5C11 17.3284 10.3284 18 9.5 18H7.5C6.67157 18 6 17.3284 6 16.5V14.5C6 13.6716 6.67157 13 7.5 13Z"
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M19 4.5H5C4.72386 4.5 4.5 4.72386 4.5 5V19C4.5 19.2761 4.72386 19.5 5 19.5H19C19.2761 19.5 19.5 19.2761 19.5 19V5C19.5 4.72386 19.2761 4.5 19 4.5ZM5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5Z"
+		/>
+	</SVG>
+);
diff --git a/projects/packages/forms/src/blocks/contact-form/index.js b/projects/packages/forms/src/blocks/contact-form/index.js
@@ -1,16 +1,15 @@
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
-import { Path } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { select } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __, _x } from '@wordpress/i18n';
 import './editor.scss';
-import renderMaterialIcon from '../shared/components/render-material-icon.jsx';
 import { FORM_POST_TYPE } from '../shared/util/constants.js';
 import defaultAttributes from './attributes.ts';
 import blockMetadata from './block.json';
 import deprecated from './deprecated.js';
 import edit from './edit.tsx';
+import { icon } from './icon.jsx';
 import transforms from './transforms.js';
 import { DEFAULT_FORM_LABEL, extractTitleText, formatFormLabel } from './util/form-label.js';
 import variations from './variations.js';
@@ -48,28 +47,6 @@ export const getFormLabel = ( { ref } ) => {
 	} );
 };
 
-const icon = renderMaterialIcon(
-	<>
-		<Path fillRule="evenodd" clipRule="evenodd" d="M18 9H13V7.5H18V9Z" />
-		<Path fillRule="evenodd" clipRule="evenodd" d="M18 16.5H13V15H18V16.5Z" />
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M9.5 7.5H7.5V9.5H9.5V7.5ZM7.5 6H9.5C10.3284 6 11 6.67157 11 7.5V9.5C11 10.3284 10.3284 11 9.5 11H7.5C6.67157 11 6 10.3284 6 9.5V7.5C6 6.67157 6.67157 6 7.5 6Z"
-		/>
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M9.5 14.5H7.5V16.5H9.5V14.5ZM7.5 13H9.5C10.3284 13 11 13.6716 11 14.5V16.5C11 17.3284 10.3284 18 9.5 18H7.5C6.67157 18 6 17.3284 6 16.5V14.5C6 13.6716 6.67157 13 7.5 13Z"
-		/>
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M19 4.5H5C4.72386 4.5 4.5 4.72386 4.5 5V19C4.5 19.2761 4.72386 19.5 5 19.5H19C19.2761 19.5 19.5 19.2761 19.5 19V5C19.5 4.72386 19.2761 4.5 19 4.5ZM5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5Z"
-		/>
-	</>
-);
-
 // Extract only valid block registration properties from block.json
 // Exclude file-based properties like editorScript, style, etc.
 const { editorScript, style, name: blockName, $schema, ...validBlockMetadata } = blockMetadata;

diff --git a/projects/packages/forms/src/dashboard/components/empty-responses/index.tsx b/projects/packages/forms/src/dashboard/components/empty-responses/index.tsx
@@ -2,15 +2,11 @@
  * External dependencies
  */
 import { isSimpleSite } from '@automattic/jetpack-script-data';
-import {
-	Button,
-	__experimentalText as Text, // eslint-disable-line @wordpress/no-unsafe-wp-apis
-	__experimentalVStack as VStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
-} from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { createInterpolateElement, useCallback, useMemo } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { Link } from '@wordpress/ui';
+import { page, search, shield, trash } from '@wordpress/icons';
+import { Button, EmptyState, Link } from '@wordpress/ui';
 /**
  * Internal dependencies
  */
@@ -44,12 +40,6 @@ type EmptyResponsesProps = {
 	status: string;
 };
 
-type EmptyWrapperProps = {
-	heading?: string;
-	body?: string | ReactNode;
-	actions?: ReactNode;
-};
-
 /**
  * Hook to handle Akismet installation and activation.
  *
@@ -152,26 +142,17 @@ const useInstallAkismet = (): UseInstallAkismetReturn => {
 	};
 };
 
-export const EmptyWrapper = ( { heading = '', body = '', actions = null }: EmptyWrapperProps ) => (
-	<VStack alignment="center" spacing="2">
-		{ heading && (
-			<Text as="h3" weight="500" size="15">
-				{ heading }
-			</Text>
-		) }
-		{ body && <Text variant="muted">{ body }</Text> }
-		{ actions && <span style={ { marginBlockStart: '16px' } }>{ actions }</span> }
-	</VStack>
-);
-
 export const NoResults = () => (
-	<EmptyWrapper
-		heading={ __( 'No results found', 'jetpack-forms' ) }
-		body={ __(
-			"Try adjusting your search or filters to find what you're looking for.",
-			'jetpack-forms'
-		) }
-	/>
+	<EmptyState.Root>
+		<EmptyState.Icon icon={ search } />
+		<EmptyState.Title>{ __( 'No results found', 'jetpack-forms' ) }</EmptyState.Title>
+		<EmptyState.Description>
+			{ __(
+				"Try adjusting your search or filters to find what you're looking for.",
+				'jetpack-forms'
+			) }
+		</EmptyState.Description>
+	</EmptyState.Root>
 );
 
 const EmptyResponses = ( {
@@ -209,7 +190,13 @@ const EmptyResponses = ( {
 	);
 	if ( status === 'trash' ) {
 		return (
-			<EmptyWrapper heading={ noTrashHeading } body={ emptyTrashDays > 0 && noTrashMessage } />
+			<EmptyState.Root>
+				<EmptyState.Icon icon={ trash } />
+				<EmptyState.Title>{ noTrashHeading }</EmptyState.Title>
+				{ emptyTrashDays > 0 && (
+					<EmptyState.Description>{ noTrashMessage }</EmptyState.Description>
+				) }
+			</EmptyState.Root>
 		);
 	}
 
@@ -222,44 +209,55 @@ const EmptyResponses = ( {
 	if ( status === 'spam' ) {
 		if ( shouldShowAkismetCta ) {
 			return (
-				<EmptyWrapper
-					heading={ noSpamHeading }
-					body={ wrapperBody }
-					actions={
+				<EmptyState.Root>
+					<EmptyState.Icon icon={ shield } />
+					<EmptyState.Title>{ noSpamHeading }</EmptyState.Title>
+					<EmptyState.Description>{ wrapperBody }</EmptyState.Description>
+					<EmptyState.Actions>
 						<Button
-							variant="primary"
-							isBusy={ isInstallingAkismet }
+							variant="solid"
+							loading={ isInstallingAkismet }
 							disabled={ isInstallingAkismet || ! canPerformAkismetAction }
 							onClick={ handleAkismetSetup }
-							__next40pxDefaultSize
 						>
 							{ wrapperButtonText }
 						</Button>
-					}
-				/>
+					</EmptyState.Actions>
+				</EmptyState.Root>
 			);
 		}
 
-		return <EmptyWrapper heading={ noSpamHeading } body={ noSpamMessage } />;
+		return (
+			<EmptyState.Root>
+				<EmptyState.Icon icon={ shield } />
+				<EmptyState.Title>{ noSpamHeading }</EmptyState.Title>
+				<EmptyState.Description>{ noSpamMessage }</EmptyState.Description>
+			</EmptyState.Root>
+		);
 	}
 
 	return (
-		<EmptyWrapper
-			heading={ __( "You're set up. No responses yet.", 'jetpack-forms' ) }
-			body={ __(
-				'Share your form to start collecting responses. New items will appear here.',
-				'jetpack-forms'
-			) }
-			actions={
-				! isSingleFormView && (
+		<EmptyState.Root>
+			<EmptyState.Icon icon={ page } />
+			<EmptyState.Title>
+				{ __( "You're set up. No responses yet.", 'jetpack-forms' ) }
+			</EmptyState.Title>
+			<EmptyState.Description>
+				{ __(
+					'Share your form to start collecting responses. New items will appear here.',
+					'jetpack-forms'
+				) }
+			</EmptyState.Description>
+			{ ! isSingleFormView && (
+				<EmptyState.Actions>
 					<CreateFormButton
 						label={ __( 'Create a new form', 'jetpack-forms' ) }
 						variant="primary"
 						showNameModal
 					/>
-				)
-			}
-		/>
+				</EmptyState.Actions>
+			) }
+		</EmptyState.Root>
 	);
 };
 

diff --git a/projects/packages/forms/src/dashboard/forms/index.tsx b/projects/packages/forms/src/dashboard/forms/index.tsx
@@ -14,15 +14,16 @@ import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
 import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
+import { EmptyState } from '@wordpress/ui';
 import { useNavigate } from 'react-router';
 /**
  * Internal dependencies
  */
+import { icon as formBlockIcon } from '../../blocks/contact-form/icon.jsx';
 import { getEmbedCode, getShortcode } from '../../blocks/shared/util/embed-codes';
 import useConfigValue from '../../hooks/use-config-value.ts';
 import CreateFormButton from '../components/create-form-button/index.tsx';
 import DataViewsHeaderRow from '../components/dataviews-header-row/index.tsx';
-import { EmptyWrapper } from '../components/empty-responses/index.tsx';
 import Page from '../components/page/index.tsx';
 import { NON_TRASH_FORM_STATUSES } from '../constants.ts';
 import useDeleteForm from '../hooks/use-delete-form.ts';
@@ -442,13 +443,15 @@ export default function FormsDashboardForms(): JSX.Element | null {
 					data={ records || [] }
 					isLoading={ isLoading }
 					empty={
-						<EmptyWrapper
-							heading={ __( "You're set up. No forms yet.", 'jetpack-forms' ) }
-							body={ __(
-								'Create a form to manage and reuse it across your site.',
-								'jetpack-forms'
-							) }
-							actions={
+						<EmptyState.Root>
+							<EmptyState.Icon icon={ formBlockIcon } />
+							<EmptyState.Title>
+								{ __( "You're set up. No forms yet.", 'jetpack-forms' ) }
+							</EmptyState.Title>
+							<EmptyState.Description>
+								{ __( 'Create a form to manage and reuse it across your site.', 'jetpack-forms' ) }
+							</EmptyState.Description>
+							<EmptyState.Actions>
 								<HStack justify="center" spacing="2">
 									<CreateFormButton
 										label={ __( 'Create a new form', 'jetpack-forms' ) }
@@ -461,8 +464,8 @@ export default function FormsDashboardForms(): JSX.Element | null {
 										</Button>
 									) }
 								</HStack>
-							}
-						/>
+							</EmptyState.Actions>
+						</EmptyState.Root>
 					}
 					view={ view }
 					onChangeView={ onChangeView }

diff --git a/projects/packages/forms/src/form-editor/plugins/form-pre-publish-panel.tsx b/projects/packages/forms/src/form-editor/plugins/form-pre-publish-panel.tsx
@@ -277,9 +277,7 @@ export const FormPrePublishPanel = () => {
 	return (
 		<PluginPrePublishPanel className="jetpack-form-pre-publish-panel" initialOpen>
 			<div className="jetpack-form-pre-publish__form-card">
-				<span className="jetpack-form-pre-publish__form-icon">
-					{ formBlockSettings.icon.src() }
-				</span>
+				<span className="jetpack-form-pre-publish__form-icon">{ formBlockSettings.icon.src }</span>
 				<span className="jetpack-form-pre-publish__form-title">
 					{ decodeEntities( postTitle ) || __( 'Untitled Form', 'jetpack-forms' ) }
 				</span>