From 5b142d97316762ff3a3bef68e6193b484eb0492e Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Tue, 31 Jan 2023 15:22:55 -0700
Subject: [PATCH 1/2] fix broken story

---
 .../src/not_found_prompt.stories.tsx          | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

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..af06b1d366c309 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
@@ -51,14 +51,18 @@ export const CustomActions: Story = (args) => {
     <EuiPageTemplate>
       <EuiPageTemplate.Section alignment="center">
         <NotFoundPrompt
-          actions={[
-            <EuiButton fill color="primary" onClick={args.onClick}>
-              Go home
-            </EuiButton>,
-            <EuiButtonEmpty iconType="search" onClick={args.onClick}>
-              Go to discover
-            </EuiButtonEmpty>,
-          ]}
+          actions={
+            <>
+              <EuiButton fill color="primary" onClick={args.onClick}>
+                Go home
+              </EuiButton>
+              <EuiButtonEmpty iconType="search" onClick={args.onClick}>
+                Go to discover
+              </EuiButtonEmpty>
+            </>
+          }
+          title="Test"
+          body="Test Body"
         />
       </EuiPageTemplate.Section>
     </EuiPageTemplate>

From bfd621361c5c55f674eae037272469348270978b Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Wed, 1 Feb 2023 08:30:48 -0700
Subject: [PATCH 2/2] add readme example

---
 .../shared-ux/prompt/not_found/README.mdx     | 24 +++++++++++++++++++
 .../src/not_found_prompt.stories.tsx          | 10 ++++----
 .../not_found/src/not_found_prompt.test.tsx   |  7 ++++++
 3 files changed, 36 insertions(+), 5 deletions(-)

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
+    <EuiPageTemplate>
+      <EuiPageTemplate.Section alignment="center">
+        <NotFoundPrompt
+          actions={
+            [
+              <EuiButton fill color="primary" onClick={onClickHandler}>
+                Go home
+              </EuiButton>,
+              <EuiButton iconType="search">
+                Go to discover
+              </EuiButton>
+            ]
+          }
+          title="Customizable Title"
+          body="Customizable Body"
+        />
+      </EuiPageTemplate.Section>
+    </EuiPageTemplate>
+```
\ 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 af06b1d366c309..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';
@@ -56,13 +56,13 @@ export const CustomActions: Story = (args) => {
               <EuiButton fill color="primary" onClick={args.onClick}>
                 Go home
               </EuiButton>
-              <EuiButtonEmpty iconType="search" onClick={args.onClick}>
+              <EuiButton iconType="search" onClick={args.onClick}>
                 Go to discover
-              </EuiButtonEmpty>
+              </EuiButton>
             </>
           }
-          title="Test"
-          body="Test Body"
+          title="Customizable Title"
+          body="Customizable Body"
         />
       </EuiPageTemplate.Section>
     </EuiPageTemplate>
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('<NotFoundPrompt />', () => {
     const component = render(<NotFoundPrompt actions={actions} />);
     expect(component.text()).toContain('I am a button');
   });
+
+  it('Renders custom actions with an array with multiple buttons', () => {
+    const actions = [<button>I am a button</button>, <button>I am a second button</button>];
+    const component = render(<NotFoundPrompt actions={actions} />);
+    expect(component.text()).toContain('I am a button');
+    expect(component.text()).toContain('I am a second button');
+  });
 });