diff --git a/src-docs/src/views/key_pad_menu/key_pad_menu_example.js b/src-docs/src/views/key_pad_menu/key_pad_menu_example.js
index 4f479fff5a1..e2ee7f6b150 100644
--- a/src-docs/src/views/key_pad_menu/key_pad_menu_example.js
+++ b/src-docs/src/views/key_pad_menu/key_pad_menu_example.js
@@ -10,6 +10,7 @@ import {
   EuiKeyPadMenuItem,
   EuiCallOut,
 } from '../../../../src/components';
+import { keyPadMenuItemConfig } from './playground';
 
 import KeyPadMenu from './key_pad_menu';
 const keyPadMenuSource = require('!!raw-loader!./key_pad_menu');
@@ -141,4 +142,5 @@ export const KeyPadMenuExample = {
       demo: <KeyPadBeta />,
     },
   ],
+  playground: keyPadMenuItemConfig,
 };
diff --git a/src-docs/src/views/key_pad_menu/playground.js b/src-docs/src/views/key_pad_menu/playground.js
new file mode 100644
index 00000000000..aa0e8e93c55
--- /dev/null
+++ b/src-docs/src/views/key_pad_menu/playground.js
@@ -0,0 +1,78 @@
+import { PropTypes } from 'react-view';
+import {
+  EuiKeyPadMenuItem,
+  EuiIcon,
+  EuiBetaBadge,
+} from '../../../../src/components/';
+import {
+  propUtilityForPlayground,
+  iconValidator,
+} from '../../services/playground';
+import * as t from '@babel/types';
+
+export const keyPadMenuItemConfig = () => {
+  const docgenInfo = Array.isArray(EuiKeyPadMenuItem.__docgenInfo)
+    ? EuiKeyPadMenuItem.__docgenInfo[0]
+    : EuiKeyPadMenuItem.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.onClick = {
+    ...propsToUse.onClick,
+    type: PropTypes.Custom,
+    value: undefined,
+    custom: {
+      ...propsToUse.onClick.custom,
+      use: 'switch',
+      label: 'Simulate',
+    },
+  };
+  propsToUse.label = {
+    ...propsToUse.label,
+    type: PropTypes.String,
+    value: 'Label',
+  };
+
+  propsToUse.betaBadgeTooltipContent = {
+    ...propsToUse.betaBadgeTooltipContent,
+    type: PropTypes.String,
+  };
+
+  propsToUse.betaBadgeIconType = iconValidator(propsToUse.betaBadgeIconType);
+
+  propsToUse.children = {
+    ...propsToUse.children,
+    type: PropTypes.ReactNode,
+    value: '<EuiIcon type="dashboardApp" size="l" />',
+    hidden: false,
+  };
+
+  return {
+    config: {
+      componentName: 'EuiKeyPadMenuItem',
+      props: propsToUse,
+      scope: {
+        EuiKeyPadMenuItem,
+        EuiIcon,
+        EuiBetaBadge,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiKeyPadMenuItem', 'EuiIcon', 'EuiBetaBadge'],
+        },
+      },
+      customProps: {
+        onClick: {
+          generate: val => {
+            if (!val) return null;
+            const obj = t.arrowFunctionExpression(
+              [],
+              t.blockStatement([]),
+              false
+            );
+            return obj;
+          },
+        },
+      },
+    },
+  };
+};