diff --git a/packages/shared-ux/prompt/not_found/README.mdx b/packages/shared-ux/prompt/not_found/README.mdx
index dc784f86b38549..3db21640d5760d 100644
--- a/packages/shared-ux/prompt/not_found/README.mdx
+++ b/packages/shared-ux/prompt/not_found/README.mdx
@@ -10,3 +10,27 @@ date: 2022-02-09
Sometimes the user tries to go to a page that doesn't exist, because the URL is broken or because they try to load a resource that does not exist. For those cases we want to show a standard 404 error.
The default call to action is a "Go back" button that simulates the browser's "Back" behaviour. Consumers can specify their own CTA's with the `actions` prop.
+
+The NotFoundPrompt component also has the prop `actions` that takes in an array of components.
+For example:
+
+```jsx
+
+
+
+ Go home
+ ,
+
+ Go to discover
+
+ ]
+ }
+ title="Customizable Title"
+ body="Customizable Body"
+ />
+
+
+```
\ No newline at end of file
diff --git a/packages/shared-ux/prompt/not_found/src/not_found_prompt.stories.tsx b/packages/shared-ux/prompt/not_found/src/not_found_prompt.stories.tsx
index 4cc103140929eb..f5dccc68d9c970 100644
--- a/packages/shared-ux/prompt/not_found/src/not_found_prompt.stories.tsx
+++ b/packages/shared-ux/prompt/not_found/src/not_found_prompt.stories.tsx
@@ -6,7 +6,7 @@
* Side Public License, v 1.
*/
-import { EuiButton, EuiButtonEmpty, EuiPageTemplate } from '@elastic/eui';
+import { EuiButton, EuiPageTemplate } from '@elastic/eui';
import React from 'react';
import { Meta, Story } from '@storybook/react';
import mdx from '../README.mdx';
@@ -51,14 +51,18 @@ export const CustomActions: Story = (args) => {
- Go home
- ,
-
- Go to discover
- ,
- ]}
+ actions={
+ <>
+
+ Go home
+
+
+ Go to discover
+
+ >
+ }
+ title="Customizable Title"
+ body="Customizable Body"
/>
diff --git a/packages/shared-ux/prompt/not_found/src/not_found_prompt.test.tsx b/packages/shared-ux/prompt/not_found/src/not_found_prompt.test.tsx
index 48f0d82520f30d..da836d48f92661 100644
--- a/packages/shared-ux/prompt/not_found/src/not_found_prompt.test.tsx
+++ b/packages/shared-ux/prompt/not_found/src/not_found_prompt.test.tsx
@@ -36,4 +36,11 @@ describe('', () => {
const component = render();
expect(component.text()).toContain('I am a button');
});
+
+ it('Renders custom actions with an array with multiple buttons', () => {
+ const actions = [, ];
+ const component = render();
+ expect(component.text()).toContain('I am a button');
+ expect(component.text()).toContain('I am a second button');
+ });
});