diff --git a/src/components/index.scss b/src/components/index.scss
index dd37d2afded..e0dc5a261c1 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -10,7 +10,6 @@
 @import 'drag_and_drop/index';
 @import 'empty_prompt/index';
 @import 'form/index';
-@import 'key_pad_menu/index';
 @import 'markdown_editor/index';
 @import 'notification/index';
 @import 'panel/index';
diff --git a/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap b/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
index 3c15b787c91..92bcbd99534 100644
--- a/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
+++ b/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
@@ -2,14 +2,14 @@
 
 exports[`EuiKeyPadMenuItem checkable renders as checkbox 1`] = `
 <label
-  class="euiKeyPadMenuItem euiKeyPadMenuItem--checkable"
+  class="euiKeyPadMenuItem emotion-euiKeyPadMenuItem-enabled"
   for="generated-id"
 >
   <span
-    class="euiKeyPadMenuItem__inner"
+    class="euiKeyPadMenuItem__inner emotion-euiKeyPadMenuItem__inner"
   >
     <div
-      class="euiCheckbox euiCheckbox--noLabel euiKeyPadMenuItem__checkableInput emotion-euiCheckbox"
+      class="euiCheckbox euiCheckbox--noLabel euiKeyPadMenuItem__checkableInput emotion-euiCheckbox-euiKeyPadMenuItem__checkableInput-showCheckableInputOnInteraction"
     >
       <input
         class="euiCheckbox__input"
@@ -21,12 +21,12 @@ exports[`EuiKeyPadMenuItem checkable renders as checkbox 1`] = `
       />
     </div>
     <span
-      class="euiKeyPadMenuItem__icon"
+      class="euiKeyPadMenuItem__icon emotion-euiKeyPadMenuItem__icon"
     >
       Icon
     </span>
     <span
-      class="euiKeyPadMenuItem__label"
+      class="euiKeyPadMenuItem__label emotion-euiKeyPadMenuItem__label"
     >
       Label
     </span>
@@ -36,14 +36,14 @@ exports[`EuiKeyPadMenuItem checkable renders as checkbox 1`] = `
 
 exports[`EuiKeyPadMenuItem checkable renders as radio 1`] = `
 <label
-  class="euiKeyPadMenuItem euiKeyPadMenuItem--checkable"
+  class="euiKeyPadMenuItem emotion-euiKeyPadMenuItem-enabled"
   for="generated-id"
 >
   <span
-    class="euiKeyPadMenuItem__inner"
+    class="euiKeyPadMenuItem__inner emotion-euiKeyPadMenuItem__inner"
   >
     <div
-      class="euiRadio euiRadio--noLabel euiKeyPadMenuItem__checkableInput"
+      class="euiRadio euiRadio--noLabel euiKeyPadMenuItem__checkableInput emotion-euiKeyPadMenuItem__checkableInput-showCheckableInputOnInteraction"
     >
       <input
         class="euiRadio__input"
@@ -57,12 +57,12 @@ exports[`EuiKeyPadMenuItem checkable renders as radio 1`] = `
       />
     </div>
     <span
-      class="euiKeyPadMenuItem__icon"
+      class="euiKeyPadMenuItem__icon emotion-euiKeyPadMenuItem__icon"
     >
       Icon
     </span>
     <span
-      class="euiKeyPadMenuItem__label"
+      class="euiKeyPadMenuItem__label emotion-euiKeyPadMenuItem__label"
     >
       Label
     </span>
@@ -73,20 +73,20 @@ exports[`EuiKeyPadMenuItem checkable renders as radio 1`] = `
 exports[`EuiKeyPadMenuItem is rendered 1`] = `
 <button
   aria-label="aria-label"
-  class="euiKeyPadMenuItem testClass1 testClass2 emotion-euiTestCss"
+  class="euiKeyPadMenuItem testClass1 testClass2 emotion-euiKeyPadMenuItem-enabled-euiTestCss"
   data-test-subj="test subject string"
   type="button"
 >
   <span
-    class="euiKeyPadMenuItem__inner"
+    class="euiKeyPadMenuItem__inner emotion-euiKeyPadMenuItem__inner"
   >
     <span
-      class="euiKeyPadMenuItem__icon"
+      class="euiKeyPadMenuItem__icon emotion-euiKeyPadMenuItem__icon"
     >
       Icon
     </span>
     <span
-      class="euiKeyPadMenuItem__label"
+      class="euiKeyPadMenuItem__label emotion-euiKeyPadMenuItem__label"
     >
       Label
     </span>
@@ -99,28 +99,28 @@ exports[`EuiKeyPadMenuItem props betaBadge renders 1`] = `
   class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
 >
   <button
-    class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
+    class="euiKeyPadMenuItem emotion-euiKeyPadMenuItem-enabled"
     type="button"
   >
     <span
-      class="euiKeyPadMenuItem__inner"
+      class="euiKeyPadMenuItem__inner emotion-euiKeyPadMenuItem__inner"
     >
       <span>
         <span
           aria-hidden="true"
-          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline"
+          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline-euiKeyPadMenuItem__betaBadge"
           title="B"
         >
           B
         </span>
       </span>
       <span
-        class="euiKeyPadMenuItem__icon"
+        class="euiKeyPadMenuItem__icon emotion-euiKeyPadMenuItem__icon"
       >
         Icon
       </span>
       <span
-        class="euiKeyPadMenuItem__label"
+        class="euiKeyPadMenuItem__label emotion-euiKeyPadMenuItem__label"
       >
         Label
       </span>
@@ -134,28 +134,28 @@ exports[`EuiKeyPadMenuItem props betaBadge renders extra betaBadgeTooltipProps 1
   class="euiToolTipAnchor customTooltipClass emotion-euiToolTipAnchor-inlineBlock"
 >
   <button
-    class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
+    class="euiKeyPadMenuItem emotion-euiKeyPadMenuItem-enabled"
     type="button"
   >
     <span
-      class="euiKeyPadMenuItem__inner"
+      class="euiKeyPadMenuItem__inner emotion-euiKeyPadMenuItem__inner"
     >
       <span>
         <span
           aria-hidden="true"
-          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline"
+          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline-euiKeyPadMenuItem__betaBadge"
           title="B"
         >
           B
         </span>
       </span>
       <span
-        class="euiKeyPadMenuItem__icon"
+        class="euiKeyPadMenuItem__icon emotion-euiKeyPadMenuItem__icon"
       >
         Icon
       </span>
       <span
-        class="euiKeyPadMenuItem__label"
+        class="euiKeyPadMenuItem__label emotion-euiKeyPadMenuItem__label"
       >
         Label
       </span>
@@ -169,16 +169,16 @@ exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeIconType 1`] =
   class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
 >
   <button
-    class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
+    class="euiKeyPadMenuItem emotion-euiKeyPadMenuItem-enabled"
     type="button"
   >
     <span
-      class="euiKeyPadMenuItem__inner"
+      class="euiKeyPadMenuItem__inner emotion-euiKeyPadMenuItem__inner"
     >
       <span>
         <span
           aria-hidden="true"
-          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline"
+          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline-euiKeyPadMenuItem__betaBadge"
           title="B"
         >
           <span
@@ -190,12 +190,12 @@ exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeIconType 1`] =
         </span>
       </span>
       <span
-        class="euiKeyPadMenuItem__icon"
+        class="euiKeyPadMenuItem__icon emotion-euiKeyPadMenuItem__icon"
       >
         Icon
       </span>
       <span
-        class="euiKeyPadMenuItem__label"
+        class="euiKeyPadMenuItem__label emotion-euiKeyPadMenuItem__label"
       >
         Label
       </span>
@@ -209,28 +209,28 @@ exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeTooltipContent
   class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
 >
   <button
-    class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
+    class="euiKeyPadMenuItem emotion-euiKeyPadMenuItem-enabled"
     type="button"
   >
     <span
-      class="euiKeyPadMenuItem__inner"
+      class="euiKeyPadMenuItem__inner emotion-euiKeyPadMenuItem__inner"
     >
       <span>
         <span
           aria-hidden="true"
-          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline"
+          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline-euiKeyPadMenuItem__betaBadge"
           title="B"
         >
           B
         </span>
       </span>
       <span
-        class="euiKeyPadMenuItem__icon"
+        class="euiKeyPadMenuItem__icon emotion-euiKeyPadMenuItem__icon"
       >
         Icon
       </span>
       <span
-        class="euiKeyPadMenuItem__label"
+        class="euiKeyPadMenuItem__label emotion-euiKeyPadMenuItem__label"
       >
         Label
       </span>
@@ -241,20 +241,20 @@ exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeTooltipContent
 
 exports[`EuiKeyPadMenuItem props isDisabled renders with href 1`] = `
 <button
-  class="euiKeyPadMenuItem euiKeyPadMenuItem-isDisabled"
+  class="euiKeyPadMenuItem emotion-euiKeyPadMenuItem-disabled"
   disabled=""
   type="button"
 >
   <span
-    class="euiKeyPadMenuItem__inner"
+    class="euiKeyPadMenuItem__inner emotion-euiKeyPadMenuItem__inner"
   >
     <span
-      class="euiKeyPadMenuItem__icon"
+      class="euiKeyPadMenuItem__icon emotion-euiKeyPadMenuItem__icon"
     >
       Icon
     </span>
     <span
-      class="euiKeyPadMenuItem__label"
+      class="euiKeyPadMenuItem__label emotion-euiKeyPadMenuItem__label"
     >
       Label
     </span>
@@ -264,20 +264,20 @@ exports[`EuiKeyPadMenuItem props isDisabled renders with href 1`] = `
 
 exports[`EuiKeyPadMenuItem props isDisabled renders with onClick 1`] = `
 <button
-  class="euiKeyPadMenuItem euiKeyPadMenuItem-isDisabled"
+  class="euiKeyPadMenuItem emotion-euiKeyPadMenuItem-disabled"
   disabled=""
   type="button"
 >
   <span
-    class="euiKeyPadMenuItem__inner"
+    class="euiKeyPadMenuItem__inner emotion-euiKeyPadMenuItem__inner"
   >
     <span
-      class="euiKeyPadMenuItem__icon"
+      class="euiKeyPadMenuItem__icon emotion-euiKeyPadMenuItem__icon"
     >
       Icon
     </span>
     <span
-      class="euiKeyPadMenuItem__label"
+      class="euiKeyPadMenuItem__label emotion-euiKeyPadMenuItem__label"
     >
       Label
     </span>
@@ -288,20 +288,20 @@ exports[`EuiKeyPadMenuItem props isDisabled renders with onClick 1`] = `
 exports[`EuiKeyPadMenuItem props isSelected renders with href 1`] = `
 <a
   aria-current="true"
-  class="euiKeyPadMenuItem euiKeyPadMenuItem-isSelected"
+  class="euiKeyPadMenuItem emotion-euiKeyPadMenuItem-enabled-selected"
   href="#"
   rel="noreferrer"
 >
   <span
-    class="euiKeyPadMenuItem__inner"
+    class="euiKeyPadMenuItem__inner emotion-euiKeyPadMenuItem__inner"
   >
     <span
-      class="euiKeyPadMenuItem__icon"
+      class="euiKeyPadMenuItem__icon emotion-euiKeyPadMenuItem__icon"
     >
       Icon
     </span>
     <span
-      class="euiKeyPadMenuItem__label"
+      class="euiKeyPadMenuItem__label emotion-euiKeyPadMenuItem__label"
     >
       Label
     </span>
@@ -312,19 +312,19 @@ exports[`EuiKeyPadMenuItem props isSelected renders with href 1`] = `
 exports[`EuiKeyPadMenuItem props isSelected renders with onClick 1`] = `
 <button
   aria-pressed="true"
-  class="euiKeyPadMenuItem euiKeyPadMenuItem-isSelected"
+  class="euiKeyPadMenuItem emotion-euiKeyPadMenuItem-enabled-selected"
   type="button"
 >
   <span
-    class="euiKeyPadMenuItem__inner"
+    class="euiKeyPadMenuItem__inner emotion-euiKeyPadMenuItem__inner"
   >
     <span
-      class="euiKeyPadMenuItem__icon"
+      class="euiKeyPadMenuItem__icon emotion-euiKeyPadMenuItem__icon"
     >
       Icon
     </span>
     <span
-      class="euiKeyPadMenuItem__label"
+      class="euiKeyPadMenuItem__label emotion-euiKeyPadMenuItem__label"
     >
       Label
     </span>
@@ -334,19 +334,19 @@ exports[`EuiKeyPadMenuItem props isSelected renders with onClick 1`] = `
 
 exports[`EuiKeyPadMenuItem renders button 1`] = `
 <button
-  class="euiKeyPadMenuItem"
+  class="euiKeyPadMenuItem emotion-euiKeyPadMenuItem-enabled"
   type="button"
 >
   <span
-    class="euiKeyPadMenuItem__inner"
+    class="euiKeyPadMenuItem__inner emotion-euiKeyPadMenuItem__inner"
   >
     <span
-      class="euiKeyPadMenuItem__icon"
+      class="euiKeyPadMenuItem__icon emotion-euiKeyPadMenuItem__icon"
     >
       Icon
     </span>
     <span
-      class="euiKeyPadMenuItem__label"
+      class="euiKeyPadMenuItem__label emotion-euiKeyPadMenuItem__label"
     >
       Label
     </span>
@@ -356,20 +356,20 @@ exports[`EuiKeyPadMenuItem renders button 1`] = `
 
 exports[`EuiKeyPadMenuItem renders href 1`] = `
 <a
-  class="euiKeyPadMenuItem"
+  class="euiKeyPadMenuItem emotion-euiKeyPadMenuItem-enabled"
   href="#"
   rel="noreferrer"
 >
   <span
-    class="euiKeyPadMenuItem__inner"
+    class="euiKeyPadMenuItem__inner emotion-euiKeyPadMenuItem__inner"
   >
     <span
-      class="euiKeyPadMenuItem__icon"
+      class="euiKeyPadMenuItem__icon emotion-euiKeyPadMenuItem__icon"
     >
       Icon
     </span>
     <span
-      class="euiKeyPadMenuItem__label"
+      class="euiKeyPadMenuItem__label emotion-euiKeyPadMenuItem__label"
     >
       Label
     </span>
@@ -379,20 +379,20 @@ exports[`EuiKeyPadMenuItem renders href 1`] = `
 
 exports[`EuiKeyPadMenuItem renders href with rel 1`] = `
 <a
-  class="euiKeyPadMenuItem"
+  class="euiKeyPadMenuItem emotion-euiKeyPadMenuItem-enabled"
   href="#"
   rel="noreferrer"
 >
   <span
-    class="euiKeyPadMenuItem__inner"
+    class="euiKeyPadMenuItem__inner emotion-euiKeyPadMenuItem__inner"
   >
     <span
-      class="euiKeyPadMenuItem__icon"
+      class="euiKeyPadMenuItem__icon emotion-euiKeyPadMenuItem__icon"
     >
       Icon
     </span>
     <span
-      class="euiKeyPadMenuItem__label"
+      class="euiKeyPadMenuItem__label emotion-euiKeyPadMenuItem__label"
     >
       Label
     </span>
diff --git a/src/components/key_pad_menu/_index.scss b/src/components/key_pad_menu/_index.scss
deleted file mode 100644
index 176705388b6..00000000000
--- a/src/components/key_pad_menu/_index.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// Key pad is a phone like nav comprised of an svg icon and a title.
-
-@import 'variables';
-
-@import 'key_pad_menu_item';
diff --git a/src/components/key_pad_menu/_key_pad_menu_item.scss b/src/components/key_pad_menu/_key_pad_menu_item.scss
deleted file mode 100644
index 29208bb25d5..00000000000
--- a/src/components/key_pad_menu/_key_pad_menu_item.scss
+++ /dev/null
@@ -1,123 +0,0 @@
-/**
- * 1. If this class is applied to a button, we need to override the Chrome default font.
- * 2. If it has a BetaBadge, make sure only the first letter shows
- */
-.euiKeyPadMenuItem {
-  @include euiFont; /* 1 */
-  display: block;
-  padding: $euiSizeXS;
-  height: $euiKeyPadMenuSize;
-  width: $euiKeyPadMenuSize;
-  border: $euiBorderThin;
-  border-color: transparent;
-  border-radius: $euiBorderRadius;
-  color: $euiTextColor; // Override possible link color
-
-  @include euiCanAnimate {
-    transition:
-      background-color $euiAnimSpeedFast ease-in,
-      border-color $euiAnimSpeedFast ease-in,
-      box-shadow $euiAnimSpeedFast ease-in;
-  }
-
-  // Focus and Hover states (when not disabled)
-  &:not(.euiKeyPadMenuItem-isDisabled) {
-    &:hover,
-    &:focus,
-    &:focus-within {
-      @include euiHoverState;
-      @include euiSlightShadow;
-      border-color: $euiBorderColor;
-
-      @include euiCanAnimate {
-        .euiKeyPadMenuItem__icon {
-          transform: translateY(0);
-        }
-      }
-    }
-
-    &:focus {
-      @include euiFocusState;
-    }
-  }
-
-  // Disabled state
-  &.euiKeyPadMenuItem-isDisabled {
-    @include euiDisabledState;
-
-    .euiKeyPadMenuItem__icon {
-      filter: grayscale(100%);
-
-      svg * { // stylelint-disable-line max-nesting-depth
-        fill: $euiButtonColorDisabledText;
-      }
-    }
-  }
-
-  // Selected state (when not disabled)
-  &.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled) {
-    @include euiSlightShadow;
-    color: $euiTitleColor;
-  }
-
-  // Selected (even if disabled)
-  &.euiKeyPadMenuItem-isSelected {
-    border-color: $euiBorderColor;
-  }
-
-  // Hide the input if not selected, or being interacted with
-  &:not(:hover):not(:focus):not(:focus-within):not(.euiKeyPadMenuItem-isSelected),
-  // Also specifically if disabled but not selected
-  &.euiKeyPadMenuItem-isDisabled:not(.euiKeyPadMenuItem-isSelected) {
-    .euiKeyPadMenuItem__checkableInput {
-      @include euiScreenReaderOnly;
-    }
-  }
-}
-
-.euiKeyPadMenuItem__inner {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-
-  .euiKeyPadMenuItem__checkableInput {
-    transform: scale(.75);
-    transform-origin: top right;
-  }
-
-  .euiKeyPadMenuItem__checkableInput,
-  .euiKeyPadMenuItem__betaBadge {
-    position: absolute;
-    top: $euiSizeXS;
-    right: $euiSizeXS;
-    z-index: 3;
-  }
-}
-
-.euiKeyPadMenuItem__icon {
-  transition: transform $euiAnimSpeedNormal $euiAnimSlightBounce;
-  margin-bottom: $euiSizeM;
-  transform: translateY(2px);
-}
-
-.euiKeyPadMenuItem__label {
-  font-size: $euiFontSizeXS;
-  font-weight: $euiFontWeightMedium;
-  line-height: $euiSize;
-  text-align: center;
-}
-
-.euiKeyPadMenuItem--checkable.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled) {
-  &,
-  &:hover,
-  &:focus,
-  &:focus-within {
-    @include euiFocusBackground;
-    color: $euiColorPrimaryText;
-    border-color: $euiColorPrimaryText;
-  }
-}
diff --git a/src/components/key_pad_menu/_variables.scss b/src/components/key_pad_menu/_variables.scss
deleted file mode 100644
index 6d0f8e437a7..00000000000
--- a/src/components/key_pad_menu/_variables.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$euiKeyPadMenuSize: $euiSize * 6 !default;
-$euiKeyPadMenuMarginSize: $euiSizeXS !default;
diff --git a/src/components/key_pad_menu/key_pad_menu_item.stories.tsx b/src/components/key_pad_menu/key_pad_menu_item.stories.tsx
new file mode 100644
index 00000000000..051c15ad95f
--- /dev/null
+++ b/src/components/key_pad_menu/key_pad_menu_item.stories.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiIcon } from '../icon';
+
+import { EuiKeyPadMenuItem, EuiKeyPadMenuItemProps } from './key_pad_menu_item';
+
+const meta: Meta<EuiKeyPadMenuItemProps> = {
+  title: 'EuiKeyPadMenuItem',
+  component: EuiKeyPadMenuItem as any,
+  argTypes: {
+    checkable: { options: [undefined, 'multi', 'single'] },
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiKeyPadMenuItemProps>;
+
+export const Playground: Story = {
+  args: {
+    children: <EuiIcon type="faceHappy" size="l" />,
+    // Make these props easier to change/toggle
+    label: 'Hello world',
+    isDisabled: false,
+    isSelected: false,
+  },
+};
diff --git a/src/components/key_pad_menu/key_pad_menu_item.styles.ts b/src/components/key_pad_menu/key_pad_menu_item.styles.ts
new file mode 100644
index 00000000000..36b74f003ef
--- /dev/null
+++ b/src/components/key_pad_menu/key_pad_menu_item.styles.ts
@@ -0,0 +1,151 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme, transparentize } from '../../services';
+import {
+  logicalCSS,
+  logicalSizeCSS,
+  euiCanAnimate,
+  euiFontSize,
+} from '../../global_styling';
+import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
+import { euiScreenReaderOnly } from '../accessibility';
+
+import { euiKeyPadMenuVariables } from './key_pad_menu.styles';
+
+export const euiKeyPadMenuItemStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  const { euiKeyPadMenuSize } = euiKeyPadMenuVariables(euiThemeContext);
+
+  return {
+    euiKeyPadMenuItem: css`
+      display: block;
+      padding: ${euiTheme.size.xs};
+      ${logicalSizeCSS(euiKeyPadMenuSize)}
+      border-radius: ${euiTheme.border.radius.medium};
+      color: ${euiTheme.colors.text}; /* Override possible link color */
+
+      ${euiCanAnimate} {
+        transition: background-color ${euiTheme.animation.fast} ease-in,
+          box-shadow ${euiTheme.animation.fast} ease-in;
+      }
+    `,
+    enabled: css`
+      &:hover,
+      &:focus,
+      &:focus-within {
+        cursor: pointer;
+        text-decoration: underline;
+        ${euiShadow(euiThemeContext, 's')}
+
+        ${euiCanAnimate} {
+          .euiKeyPadMenuItem__icon {
+            transform: translateY(0);
+          }
+        }
+      }
+
+      &:focus {
+        background-color: ${euiTheme.focus.backgroundColor};
+        box-shadow: none;
+      }
+    `,
+    selected: css`
+      color: ${euiTheme.colors.title};
+      background-color: ${euiTheme.focus.backgroundColor};
+
+      &,
+      &:hover,
+      &:focus,
+      &:focus-within {
+        color: ${euiTheme.colors.primaryText};
+      }
+    `,
+    disabled: {
+      disabled: css`
+        cursor: not-allowed;
+        color: ${euiTheme.colors.disabledText};
+
+        .euiKeyPadMenuItem__icon {
+          filter: grayscale(100%);
+
+          svg * {
+            fill: ${euiTheme.colors.disabledText};
+          }
+        }
+      `,
+      selected: css`
+        background-color: ${transparentize(
+          euiTheme.colors.disabled,
+          euiTheme.focus.transparency
+        )};
+      `,
+    },
+  };
+};
+
+export const euiKeyPadMenuItemChildStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  const topRightChildren = `
+    z-index: 3;
+    position: absolute;
+    ${logicalCSS('top', euiTheme.size.xs)}
+    ${logicalCSS('right', euiTheme.size.xs)}
+  `;
+
+  return {
+    euiKeyPadMenuItem__inner: css`
+      ${logicalSizeCSS('100%')}
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    `,
+    euiKeyPadMenuItem__icon: css`
+      ${logicalCSS('margin-bottom', euiTheme.size.m)}
+      transform: translateY(2px);
+
+      ${euiCanAnimate} {
+        transition: transform ${euiTheme.animation.normal}
+          ${euiTheme.animation.bounce};
+      }
+    `,
+    euiKeyPadMenuItem__label: css`
+      ${euiFontSize(euiThemeContext, 'xs')}
+      font-weight: ${euiTheme.font.weight.semiBold};
+      text-align: center;
+    `,
+
+    euiKeyPadMenuItem__betaBadge: css`
+      ${topRightChildren}
+    `,
+
+    euiKeyPadMenuItem__checkableInput: css`
+      ${topRightChildren}
+      transform: scale(.75);
+      transform-origin: top right;
+
+      /* TODO: Remove this once EuiCheckbox and EuiRadio have been converted to Emotion */
+      && {
+        position: absolute;
+      }
+    `,
+    showCheckableInputOnInteraction: css`
+      .euiKeyPadMenuItem:not(:hover, :focus, :focus-within) & {
+        ${euiScreenReaderOnly()}
+      }
+    `,
+    hideCheckableInput: css`
+      ${euiScreenReaderOnly()}
+    `,
+  };
+};
diff --git a/src/components/key_pad_menu/key_pad_menu_item.tsx b/src/components/key_pad_menu/key_pad_menu_item.tsx
index bbfacc61631..ba35d3dac62 100644
--- a/src/components/key_pad_menu/key_pad_menu_item.tsx
+++ b/src/components/key_pad_menu/key_pad_menu_item.tsx
@@ -12,9 +12,16 @@ import React, {
   ReactNode,
   Ref,
   LabelHTMLAttributes,
+  useMemo,
 } from 'react';
 import classNames from 'classnames';
 
+import {
+  useEuiTheme,
+  getSecureRelForTarget,
+  useGeneratedHtmlId,
+} from '../../services';
+
 import {
   CommonProps,
   ExclusiveUnion,
@@ -23,14 +30,16 @@ import {
 } from '../common';
 
 import { EuiBetaBadge } from '../badge/beta_badge';
-
-import { getSecureRelForTarget, useGeneratedHtmlId } from '../../services';
-
 import { IconType } from '../icon';
 import { EuiRadio, EuiCheckbox } from '../form';
 import { validateHref } from '../../services/security/href_validator';
 import { EuiToolTip, EuiToolTipProps } from '../tool_tip';
 
+import {
+  euiKeyPadMenuItemStyles,
+  euiKeyPadMenuItemChildStyles,
+} from './key_pad_menu_item.styles';
+
 export type EuiKeyPadMenuItemCheckableType = 'single' | 'multi';
 
 export type EuiKeyPadMenuItemCommonProps = {
@@ -176,16 +185,15 @@ export const EuiKeyPadMenuItem: FunctionComponent<EuiKeyPadMenuItemProps> = ({
   const isHrefValid = !href || validateHref(href);
   const isDisabled = disabled || _isDisabled || !isHrefValid;
 
-  const classes = classNames(
-    'euiKeyPadMenuItem',
-    {
-      'euiKeyPadMenuItem--hasBetaBadge': betaBadgeLabel,
-      'euiKeyPadMenuItem--checkable': checkable,
-      'euiKeyPadMenuItem-isDisabled': isDisabled,
-      'euiKeyPadMenuItem-isSelected': isSelected,
-    },
-    className
-  );
+  const euiTheme = useEuiTheme();
+  const styles = euiKeyPadMenuItemStyles(euiTheme);
+  const cssStyles = [
+    styles.euiKeyPadMenuItem,
+    !isDisabled ? styles.enabled : styles.disabled.disabled,
+    isSelected && (!isDisabled ? styles.selected : styles.disabled.selected),
+  ];
+
+  const classes = classNames('euiKeyPadMenuItem', className);
 
   let Element: keyof JSX.IntrinsicElements =
     href && !isDisabled ? 'a' : 'button';
@@ -193,42 +201,54 @@ export const EuiKeyPadMenuItem: FunctionComponent<EuiKeyPadMenuItemProps> = ({
   type ElementType = ReactElementType<typeof Element>;
 
   const itemId = useGeneratedHtmlId({ conditionalId: id });
+  const childStyles = useMemo(
+    () => euiKeyPadMenuItemChildStyles(euiTheme),
+    [euiTheme]
+  );
 
-  const renderCheckableElement = () => {
+  const checkableElement = useMemo(() => {
     if (!checkable) return;
 
-    const inputClasses = classNames('euiKeyPadMenuItem__checkableInput');
+    const cssStyles = [
+      childStyles.euiKeyPadMenuItem__checkableInput,
+      !isSelected && isDisabled && childStyles.hideCheckableInput,
+      !isSelected && !isDisabled && childStyles.showCheckableInputOnInteraction,
+    ];
+
+    const sharedProps = {
+      id: itemId,
+      className: 'euiKeyPadMenuItem__checkableInput',
+      css: cssStyles,
+      checked: isSelected,
+      disabled: isDisabled,
+      name,
+    };
 
-    let checkableElement;
     if (checkable === 'single') {
-      checkableElement = (
+      return (
         <EuiRadio
-          id={itemId}
-          className={inputClasses}
-          checked={isSelected}
-          disabled={isDisabled}
-          name={name}
+          {...sharedProps}
           value={value as string}
           onChange={() => onChange!(itemId, value)}
         />
       );
     } else {
-      checkableElement = (
-        <EuiCheckbox
-          id={itemId}
-          className={inputClasses}
-          checked={isSelected}
-          disabled={isDisabled}
-          name={name}
-          onChange={() => onChange!(itemId)}
-        />
+      return (
+        <EuiCheckbox {...sharedProps} onChange={() => onChange!(itemId)} />
       );
     }
+  }, [
+    checkable,
+    isDisabled,
+    isSelected,
+    onChange,
+    value,
+    name,
+    itemId,
+    childStyles,
+  ]);
 
-    return checkableElement;
-  };
-
-  const renderBetaBadge = () => {
+  const betaBadge = useMemo(() => {
     if (!betaBadgeLabel) return;
 
     return (
@@ -239,11 +259,12 @@ export const EuiKeyPadMenuItem: FunctionComponent<EuiKeyPadMenuItemProps> = ({
         size="s"
         color="subdued"
         className="euiKeyPadMenuItem__betaBadge"
+        css={childStyles.euiKeyPadMenuItem__betaBadge}
         label={betaBadgeLabel.charAt(0)}
         iconType={betaBadgeIconType}
       />
     );
-  };
+  }, [betaBadgeLabel, betaBadgeIconType, childStyles]);
 
   const relObj: {
     disabled?: boolean;
@@ -272,15 +293,29 @@ export const EuiKeyPadMenuItem: FunctionComponent<EuiKeyPadMenuItemProps> = ({
   const button = (
     <Element
       className={classes}
+      css={cssStyles}
       {...(relObj as ElementType)}
       {...(rest as ElementType)}
       // Unable to get past `LegacyRef` conflicts
       ref={buttonRef as Ref<any>}
     >
-      <span className="euiKeyPadMenuItem__inner">
-        {checkable ? renderCheckableElement() : renderBetaBadge()}
-        <span className="euiKeyPadMenuItem__icon">{children}</span>
-        <span className="euiKeyPadMenuItem__label">{label}</span>
+      <span
+        className="euiKeyPadMenuItem__inner"
+        css={childStyles.euiKeyPadMenuItem__inner}
+      >
+        {checkable ? checkableElement : betaBadge}
+        <span
+          className="euiKeyPadMenuItem__icon"
+          css={childStyles.euiKeyPadMenuItem__icon}
+        >
+          {children}
+        </span>
+        <span
+          className="euiKeyPadMenuItem__label"
+          css={childStyles.euiKeyPadMenuItem__label}
+        >
+          {label}
+        </span>
       </span>
     </Element>
   );
diff --git a/src/themes/amsterdam/overrides/_index.scss b/src/themes/amsterdam/overrides/_index.scss
index 86344a3ae00..e9af2a3f536 100644
--- a/src/themes/amsterdam/overrides/_index.scss
+++ b/src/themes/amsterdam/overrides/_index.scss
@@ -5,6 +5,5 @@
 @import 'form_control_layout_delimited';
 @import 'form_controls';
 @import 'hue';
-@import 'key_pad_menu';
 @import 'markdown_editor';
 @import 'side_nav';
diff --git a/src/themes/amsterdam/overrides/_key_pad_menu.scss b/src/themes/amsterdam/overrides/_key_pad_menu.scss
deleted file mode 100644
index ac67cd362f3..00000000000
--- a/src/themes/amsterdam/overrides/_key_pad_menu.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-.euiKeyPadMenuItem {
-  border: none !important; // stylelint-disable-line declaration-no-important
-  box-shadow: none;
-
-  // Focus and Hover states (when not disabled)
-  &:not(.euiKeyPadMenuItem-isDisabled) {
-    &:hover,
-    &:focus:hover,
-    &:focus-within {
-      @include euiBottomShadowSmall;
-    }
-
-    &:focus {
-      box-shadow: none;
-    }
-  }
-
-  &.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled) {
-    box-shadow: none;
-
-    &:hover {
-      @include euiBottomShadowSmall;
-    }
-
-    &,
-    &:hover,
-    &:focus,
-    &:focus-within {
-      @include euiFocusBackground;
-      // Calculate the right text contrast ratio based on focus transparency
-      $backgroundColorSimulated: mix($euiColorEmptyShade, $euiColorPrimary, $euiFocusTransparencyPercent);
-      color: makeHighContrastColor($euiColorPrimaryText, $backgroundColorSimulated);
-    }
-  }
-
-  &.euiKeyPadMenuItem-isSelected.euiKeyPadMenuItem-isDisabled {
-    @include euiFocusBackground($euiColorDisabled);
-    // Calculate the right text contrast ratio based on focus transparency
-    $backgroundColorSimulated: mix($euiColorEmptyShade, $euiColorDisabled, $euiFocusTransparencyPercent);
-    color: makeDisabledContrastColor($euiColorDisabledText, $backgroundColorSimulated);
-  }
-}
-
-.euiKeyPadMenuItem__label {
-  font-weight: $euiFontWeightSemiBold;
-}
diff --git a/upcoming_changelogs/7118.md b/upcoming_changelogs/7118.md
new file mode 100644
index 00000000000..e2da0c43018
--- /dev/null
+++ b/upcoming_changelogs/7118.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiKeyPadMenuItem` to Emotion; Removed `$euiKeyPadMenuSize` and `$euiKeyPadMenuMarginSize`