diff --git a/.changeset/swift-readers-sin.md b/.changeset/swift-readers-sin.md
new file mode 100644
index 0000000000..05bd05a94c
--- /dev/null
+++ b/.changeset/swift-readers-sin.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Allow custom images in the empty state component
diff --git a/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx b/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx
index 53314497fb..65e9641dd0 100644
--- a/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx
+++ b/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx
@@ -76,3 +76,19 @@ export const WithAction = () => (
/>
);
+
+export const CustomImage = () => (
+
+
+ ),
+ }}
+ />
+
+);
diff --git a/packages/core-components/src/components/EmptyState/EmptyState.test.tsx b/packages/core-components/src/components/EmptyState/EmptyState.test.tsx
index 6487fcf4e6..b24dbd812b 100644
--- a/packages/core-components/src/components/EmptyState/EmptyState.test.tsx
+++ b/packages/core-components/src/components/EmptyState/EmptyState.test.tsx
@@ -36,4 +36,18 @@ describe('', () => {
expect(rendered.getByLabelText('button')).toBeInTheDocument();
expect(rendered.getByAltText('annotation is missing')).toBeInTheDocument();
});
+
+ it('renders custom image if one is provided', async () => {
+ const { getByText } = await renderWithEffects(
+ wrapInTestApp(
+ Custom Image }}
+ />,
+ ),
+ );
+
+ expect(getByText('Some empty state text')).toBeInTheDocument();
+ expect(getByText('Custom Image')).toBeInTheDocument();
+ });
});
diff --git a/packages/core-components/src/components/EmptyState/EmptyState.tsx b/packages/core-components/src/components/EmptyState/EmptyState.tsx
index b4fbf6d510..3691ffca9e 100644
--- a/packages/core-components/src/components/EmptyState/EmptyState.tsx
+++ b/packages/core-components/src/components/EmptyState/EmptyState.tsx
@@ -42,7 +42,7 @@ const useStyles = makeStyles(
type Props = {
title: string;
description?: string | JSX.Element;
- missing: 'field' | 'info' | 'content' | 'data';
+ missing: 'field' | 'info' | 'content' | 'data' | { customImage: JSX.Element };
action?: JSX.Element;
};
@@ -78,7 +78,11 @@ export function EmptyState(props: Props) {
-
+ {typeof missing === 'string' ? (
+
+ ) : (
+ missing.customImage
+ )}
);