diff --git a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx b/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx
index 3a20dec36d..588033a4a3 100644
--- a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx
+++ b/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx
@@ -269,7 +269,7 @@ export const WithFilters = () => {
   );
 };
 
-export const WithNoResults = () => {
+export const WithDefaultNoResultsComponent = () => {
   const [query] = useState<Partial<SearchQuery>>({
     types: ['techdocs'],
   });
@@ -285,6 +285,40 @@ export const WithNoResults = () => {
   );
 };
 
+export const WithCustomNoResultsComponent = () => {
+  const [query] = useState<Partial<SearchQuery>>({
+    types: ['techdocs'],
+  });
+
+  return (
+    <TestApiProvider apis={[[searchApiRef, new MockSearchApi()]]}>
+      <SearchResultGroup
+        query={query}
+        icon={<DocsIcon />}
+        title="Documentation"
+        noResultsComponent="No results were found"
+      />
+    </TestApiProvider>
+  );
+};
+
+export const DisableRenderingWithNoResults = () => {
+  const [query] = useState<Partial<SearchQuery>>({
+    types: ['techdocs'],
+  });
+
+  return (
+    <TestApiProvider apis={[[searchApiRef, new MockSearchApi()]]}>
+      <SearchResultGroup
+        query={query}
+        icon={<DocsIcon />}
+        title="Documentation"
+        disableRenderingWithNoResults
+      />
+    </TestApiProvider>
+  );
+};
+
 const CustomResultListItem = (props: any) => {
   const { icon, result } = props;