diff --git a/packages/eslint-plugin/README.md b/packages/eslint-plugin/README.md
index ca2a6659bad0..1d121a4f77fa 100644
--- a/packages/eslint-plugin/README.md
+++ b/packages/eslint-plugin/README.md
@@ -153,7 +153,7 @@ Ensure that `EuiCallOut` components rendered conditionally have the `announceOnM
 
 ### `@elastic/eui/no-unnamed-interactive-element`
 
-Ensure that appropriate aria-attributes are set for `EuiBetaBadge`, `EuiButtonIcon`, `EuiComboBox`, `EuiSelect`, `EuiSelectWithWidth`,`EuiSuperSelect`,`EuiPagination`, `EuiTreeView`, `EuiBreadcrumbs`. Without this rule, screen reader users lose context, keyboard navigation can be confusing.
+Ensure that appropriate aria-attributes are set for `EuiBadge`, `EuiButtonIcon`, `EuiComboBox`, `EuiSelect`, `EuiSelectWithWidth`,`EuiSuperSelect`,`EuiPagination`, `EuiTreeView`, `EuiBreadcrumbs`. Without this rule, screen reader users lose context, keyboard navigation can be confusing.
 
 ### `@elastic/eui/tooltip-focusable-anchor`
 
diff --git a/packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.test.ts b/packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.test.ts
index 2588150fe624..d3f1905d57da 100644
--- a/packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.test.ts
+++ b/packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.test.ts
@@ -23,7 +23,7 @@ const languageOptions = {
 ruleTester.run('NoUnnamedInteractiveElement', NoUnnamedInteractiveElement, {
   valid: [
     // Components with allowed a11y props
-    { code: '<EuiBetaBadge aria-label="Beta badge" />', languageOptions },
+    { code: '<EuiBadge aria-label="Badge" />', languageOptions },
     { code: '<EuiButtonIcon aria-label="Icon" />', languageOptions },
     { code: '<EuiComboBox aria-label="Combo label" />', languageOptions },
     { code: '<EuiSelect aria-label="Select label" />', languageOptions },
@@ -57,7 +57,7 @@ ruleTester.run('NoUnnamedInteractiveElement', NoUnnamedInteractiveElement, {
   invalid: [
     // Missing a11y prop for interactive components
     {
-      code: '<EuiBetaBadge />',
+      code: '<EuiBadge />',
       languageOptions,
       errors: [{ messageId: 'missingA11y' }],
     },
diff --git a/packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.ts b/packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.ts
index c6425bd17d3c..d0da47e8d880 100644
--- a/packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.ts
+++ b/packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.ts
@@ -15,7 +15,7 @@ import {
 import { hasA11yPropForComponent } from '../../utils/has_a11y_prop_for_component';
 
 const interactiveComponents = [
-  'EuiBetaBadge',
+  'EuiBadge',
   'EuiButtonIcon',
   'EuiComboBox',
   'EuiSelect',
@@ -27,7 +27,7 @@ const interactiveComponents = [
 ] as const;
 
 const wrappingComponents = ['EuiFormRow'] as const;
-const interactiveComponentsWithLabel = ['EuiBetaBadge'] as const;
+const interactiveComponentsWithLabel = ['EuiBadge'] as const;
 const baseA11yProps = ['aria-label', 'aria-labelledby'] as const;
 
 // Single source of truth for the utils (keeps them reusable)
diff --git a/packages/eslint-plugin/src/rules/a11y/tooltip_focusable_anchor.ts b/packages/eslint-plugin/src/rules/a11y/tooltip_focusable_anchor.ts
index da2255c5c4ca..644fb47e5966 100644
--- a/packages/eslint-plugin/src/rules/a11y/tooltip_focusable_anchor.ts
+++ b/packages/eslint-plugin/src/rules/a11y/tooltip_focusable_anchor.ts
@@ -17,7 +17,6 @@ const NON_INTERACTIVE_ELEMENTS = [
   'EuiText',
   'EuiImage',
   'EuiBadge',
-  'EuiBetaBadge'
 ];
 
 const INTERACTIVE_ATTRS = [
diff --git a/packages/eslint-plugin/src/utils/constants.ts b/packages/eslint-plugin/src/utils/constants.ts
index 02013a932396..f62e71a884ec 100644
--- a/packages/eslint-plugin/src/utils/constants.ts
+++ b/packages/eslint-plugin/src/utils/constants.ts
@@ -100,7 +100,6 @@ export const INTERACTIVE_EUI_COMPONENTS = [
   'EuiFilterSelectItem',
   'EuiFilterSelectable',
   'EuiBadge',
-  'EuiBetaBadge',
   'EuiSelectable',
   'EuiComboBox',
   'EuiSuperSelect',
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiCard_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiCard_Playground.png
index e6214c368777..1aa66cf43d38 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiCard_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiCard_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Controlled_With_Files.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Controlled_With_Files.png
new file mode 100644
index 000000000000..52a152ef56eb
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Controlled_With_Files.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_High_Contrast_Dark_Mode.png
index d01c3ac63611..40d5af29a389 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_High_Contrast_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_High_Contrast_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png
index e53a0b405654..f64933d70276 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png
index ecd8624d7745..bc913f8e2a9b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png
index 87c8443cfcb2..016041e088af 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png
index 8a439d1f2dc8..ddd10e27c3f3 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Font_Default_Units.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Font_Default_Units.png
index 1de668dd68f8..5ec489c0d989 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Font_Default_Units.png and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Font_Default_Units.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Nearest.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Nearest.png
index 8732cdacbd49..c10732ffb4eb 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Nearest.png and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Nearest.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiCard_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiCard_Playground.png
index 1eab45096d06..d593f9de4b63 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiCard_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiCard_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Controlled_With_Files.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Controlled_With_Files.png
new file mode 100644
index 000000000000..b4325f29f902
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Controlled_With_Files.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png
index b43023c8da04..26f7a527041d 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png
index 168aa008ac58..66834b5586ea 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png differ
diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.tsx b/packages/eui/src/components/badge/beta_badge/beta_badge.tsx
index 9ef89cdee524..807606726797 100644
--- a/packages/eui/src/components/badge/beta_badge/beta_badge.tsx
+++ b/packages/eui/src/components/badge/beta_badge/beta_badge.tsx
@@ -127,6 +127,9 @@ export type EuiBetaBadgeProps = CommonProps &
   > &
   BadgeProps;
 
+/**
+ * @deprecated Use `EuiBadge` instead
+ */
 export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
   className,
   label,
diff --git a/packages/eui/src/components/card/__snapshots__/card.test.tsx.snap b/packages/eui/src/components/card/__snapshots__/card.test.tsx.snap
index 3a6adcf33024..220f8b2cbd8d 100644
--- a/packages/eui/src/components/card/__snapshots__/card.test.tsx.snap
+++ b/packages/eui/src/components/card/__snapshots__/card.test.tsx.snap
@@ -33,13 +33,21 @@ exports[`EuiCard betaBadgeProps renders href 1`] = `
       class="emotion-euiCard__betaBadgeAnchor"
     >
       <a
-        class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline-euiCard__betaBadge"
+        class="euiBadge emotion-euiBadge-hollow-hollow-euiCard__betaBadge"
         href="http://www.elastic.co/"
         id="generated-idBetaBadge"
         rel="noreferrer"
         title="Link"
       >
-        Link
+        <span
+          class="euiBadge__content emotion-euiBadge__content"
+        >
+          <span
+            class="euiBadge__text emotion-euiBadge__text-clickable"
+          >
+            Link
+          </span>
+        </span>
       </a>
     </span>
   </div>
diff --git a/packages/eui/src/components/card/card.stories.tsx b/packages/eui/src/components/card/card.stories.tsx
index 334df38a938d..576aa2942e29 100644
--- a/packages/eui/src/components/card/card.stories.tsx
+++ b/packages/eui/src/components/card/card.stories.tsx
@@ -46,6 +46,13 @@ export const Playground: Story = {
     title: 'Card title',
     description: 'Card description',
     footer: '',
+    betaBadgeProps: {
+      "color": "accent",
+      "children": "Hello"
+    },
+    betaBadgeTooltipProps: {
+      "content": "hello"
+    }
   },
   render: function Render({
     icon,
diff --git a/packages/eui/src/components/card/card.styles.ts b/packages/eui/src/components/card/card.styles.ts
index c6bb60472405..aae2656c3c96 100644
--- a/packages/eui/src/components/card/card.styles.ts
+++ b/packages/eui/src/components/card/card.styles.ts
@@ -268,6 +268,16 @@ export const euiCardBetaBadgeStyles = (
 
     euiCard__betaBadge: css`
       ${logicalCSS('width', '100%')}
+
+      /* Styles to keep visual parity with EuiBetaBadge */
+      align-items: center;
+      block-size: ${euiTheme.size.l};
+      display: flex;
+      font-weight: ${euiTheme.font.weight.semiBold};
+      letter-spacing: 0.05em;
+      padding-inline: ${euiTheme.size.base};
+      text-align: center;
+      text-transform: uppercase;
     `,
   };
 };
diff --git a/packages/eui/src/components/card/card.test.tsx b/packages/eui/src/components/card/card.test.tsx
index 28334a47482b..574b5dcaebde 100644
--- a/packages/eui/src/components/card/card.test.tsx
+++ b/packages/eui/src/components/card/card.test.tsx
@@ -33,8 +33,8 @@ describe('EuiCard', () => {
   });
 
   shouldRenderCustomStyles(
-    <EuiCard title="Card title" betaBadgeProps={{ label: 'beta' }} />,
-    { childProps: ['betaBadgeProps', 'betaBadgeProps.anchorProps'] }
+    <EuiCard title="Card title" betaBadgeProps={{ children: 'beta' }} />,
+    { childProps: ['betaBadgeProps', 'betaBadgeTooltipProps.anchorProps'] }
   );
 
   describe('props', () => {
@@ -329,7 +329,7 @@ describe('EuiCard', () => {
         description="Card description"
         betaBadgeProps={{
           href: 'http://www.elastic.co/',
-          label: 'Link',
+          children: 'Link',
         }}
       />
     );
diff --git a/packages/eui/src/components/card/card.tsx b/packages/eui/src/components/card/card.tsx
index fd5c38071a6b..84675062280a 100644
--- a/packages/eui/src/components/card/card.tsx
+++ b/packages/eui/src/components/card/card.tsx
@@ -24,12 +24,13 @@ import { useGeneratedHtmlId } from '../../services/accessibility';
 import { validateHref } from '../../services/security/href_validator';
 
 import { CommonProps, ExclusiveUnion } from '../common';
-import { EuiText } from '../text';
-import { EuiTitle } from '../title';
-import { EuiBetaBadge, EuiBetaBadgeProps } from '../badge/beta_badge';
+import { EuiBadge, EuiBadgeProps } from '../badge';
 import { EuiIconProps } from '../icon';
 import { EuiPanel, EuiPanelProps } from '../panel';
 import { EuiSpacer } from '../spacer';
+import { EuiText } from '../text';
+import { EuiTitle } from '../title';
+import { EuiToolTip, EuiToolTipProps } from '../tool_tip';
 
 import { EuiCardSelect, EuiCardSelectProps } from './card_select';
 import {
@@ -114,10 +115,15 @@ export type EuiCardProps = Omit<CommonProps, 'aria-label'> &
     target?: string;
     rel?: string;
     /**
-     * Adds a badge to top of the card to label it as "Beta" or other non-GA state.
-     * Accepts all the props of [EuiBetaBadge](#/display/badge#beta-badge-type), where `label` is required.
+     * Adds a badge to top of the card.
+     * Accepts all the props of {@link https://eui.elastic.co/docs/components/display/badge/ | EuiBadge}.
+     */
+    betaBadgeProps?: EuiBadgeProps;
+    /**
+     * Extends the wrapping {@link https://eui.elastic.co/docs/components/display/tooltip/ | EuiToolTip} props
+     * when `betaBadgeProps` is provided.
      */
-    betaBadgeProps?: EuiBetaBadgeProps;
+    betaBadgeTooltipProps?: Omit<EuiToolTipProps, 'children'>;
     /**
      * Matches to the color property of EuiPanel. If defined, removes any border & shadow.
      * Leave as `undefined` to display as a default panel.
@@ -155,6 +161,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
   target,
   textAlign = 'center',
   betaBadgeProps,
+  betaBadgeTooltipProps,
   layout = 'vertical',
   selectable,
   display,
@@ -267,37 +274,61 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
   }
 
   /**
-   * Optional EuiBetaBadge
+   * Optional `EuiBadge`
    */
 
   let optionalBetaBadge;
   let optionalBetaBadgeID = '';
   let optionalBetaCSS;
-  if (betaBadgeProps?.label) {
+
+  if (betaBadgeProps?.children) {
     const betaStyles = euiCardBetaBadgeStyles(euiThemeContext, paddingSize);
     optionalBetaCSS = betaStyles.hasBetaBadge;
 
-    const { anchorProps, ...cleanedBetaBadgeProps } = betaBadgeProps;
-    const anchorCSS = [betaStyles.euiCard__betaBadgeAnchor, anchorProps?.css];
+    const { anchorProps: tooltipAnchorProps, ...tooltipPropsRest } =
+      betaBadgeTooltipProps ?? {};
+    const { css: tooltipAnchorCss, ...tooltipAnchorRest } =
+      tooltipAnchorProps ?? {};
+
+    const anchorCSS = [betaStyles.euiCard__betaBadgeAnchor, tooltipAnchorCss];
     const badgeCSS = [betaStyles.euiCard__betaBadge, betaBadgeProps?.css];
 
     optionalBetaBadgeID = `${ariaId}BetaBadge`;
-    optionalBetaBadge = (
-      <EuiBetaBadge
-        color={
-          isDisabled && !betaBadgeProps.onClick && !betaBadgeProps.href
-            ? 'subdued'
-            : 'hollow'
-        }
-        {...cleanedBetaBadgeProps}
+    const defaultBetaBadgeColor =
+      isDisabled && !betaBadgeProps.onClick && !betaBadgeProps.href
+        ? 'subdued'
+        : 'hollow';
+    const badgeColor = betaBadgeProps.color ?? defaultBetaBadgeColor;
+    const badgeFill =
+      betaBadgeProps.fill ??
+      (badgeColor !== 'hollow' &&
+        badgeColor !== 'subdued' &&
+        badgeColor !== 'default');
+
+    const badge = (
+      <EuiBadge
+        {...betaBadgeProps}
+        color={badgeColor}
         css={badgeCSS}
-        anchorProps={{ ...anchorProps, css: anchorCSS }}
+        fill={badgeFill}
         id={optionalBetaBadgeID}
       />
     );
 
-    // Increase padding size when there is a beta badge unless it's already determined
-    // paddingSize = paddingSize || 'l';
+    const hasTooltip =
+      betaBadgeTooltipProps?.content != null ||
+      betaBadgeTooltipProps?.title != null;
+
+    optionalBetaBadge = (
+      // Card positioning must live on an outer wrapper
+      <span {...tooltipAnchorRest} css={anchorCSS}>
+        {hasTooltip ? (
+          <EuiToolTip {...tooltipPropsRest}>{badge}</EuiToolTip>
+        ) : (
+          badge
+        )}
+      </span>
+    );
   }
 
   /**
diff --git a/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap b/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
index f3ff07cb30b7..aec1fa7bb3e2 100644
--- a/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
+++ b/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
@@ -116,13 +116,19 @@ exports[`EuiKeyPadMenuItem props betaBadge renders 1`] = `
     <span
       class="euiKeyPadMenuItem__inner emotion-euiKeyPadMenuItem__inner"
     >
-      <span>
+      <span
+        aria-hidden="true"
+        class="euiBadge euiKeyPadMenuItem__betaBadge emotion-euiBadge-default-euiKeyPadMenuItem__betaBadge-euiKeyPadMenuItem__betaBadgeLetter-betaBadge"
+        title="B"
+      >
         <span
-          aria-hidden="true"
-          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline-euiKeyPadMenuItem__betaBadge"
-          title="B"
+          class="euiBadge__content emotion-euiBadge__content"
         >
-          B
+          <span
+            class="euiBadge__text emotion-euiBadge__text"
+          >
+            B
+          </span>
         </span>
       </span>
       <span
@@ -152,13 +158,19 @@ exports[`EuiKeyPadMenuItem props betaBadge renders extra betaBadgeTooltipProps 1
     <span
       class="euiKeyPadMenuItem__inner emotion-euiKeyPadMenuItem__inner"
     >
-      <span>
+      <span
+        aria-hidden="true"
+        class="euiBadge euiKeyPadMenuItem__betaBadge emotion-euiBadge-default-euiKeyPadMenuItem__betaBadge-euiKeyPadMenuItem__betaBadgeLetter-betaBadge"
+        title="B"
+      >
         <span
-          aria-hidden="true"
-          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline-euiKeyPadMenuItem__betaBadge"
-          title="B"
+          class="euiBadge__content emotion-euiBadge__content"
         >
-          B
+          <span
+            class="euiBadge__text emotion-euiBadge__text"
+          >
+            B
+          </span>
         </span>
       </span>
       <span
@@ -188,15 +200,15 @@ exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeIconType 1`] =
     <span
       class="euiKeyPadMenuItem__inner emotion-euiKeyPadMenuItem__inner"
     >
-      <span>
+      <span
+        aria-hidden="true"
+        class="euiBadge euiKeyPadMenuItem__betaBadge emotion-euiBadge-iconOnly-default-euiKeyPadMenuItem__betaBadge-betaBadge"
+      >
         <span
-          aria-hidden="true"
-          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline-euiKeyPadMenuItem__betaBadge"
-          title="B"
+          class="euiBadge__content emotion-euiBadge__content"
         >
           <span
-            aria-hidden="true"
-            class="euiBetaBadge__icon emotion-euiBetaBadge__icon"
+            class="euiBadge__icon emotion-euiBadge__icon-left"
             color="inherit"
             data-euiicon-type="bolt"
           />
@@ -229,13 +241,19 @@ exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeTooltipContent
     <span
       class="euiKeyPadMenuItem__inner emotion-euiKeyPadMenuItem__inner"
     >
-      <span>
+      <span
+        aria-hidden="true"
+        class="euiBadge euiKeyPadMenuItem__betaBadge emotion-euiBadge-default-euiKeyPadMenuItem__betaBadge-euiKeyPadMenuItem__betaBadgeLetter-betaBadge"
+        title="B"
+      >
         <span
-          aria-hidden="true"
-          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline-euiKeyPadMenuItem__betaBadge"
-          title="B"
+          class="euiBadge__content emotion-euiBadge__content"
         >
-          B
+          <span
+            class="euiBadge__text emotion-euiBadge__text"
+          >
+            B
+          </span>
         </span>
       </span>
       <span
diff --git a/packages/eui/src/components/key_pad_menu/key_pad_menu_item.styles.ts b/packages/eui/src/components/key_pad_menu/key_pad_menu_item.styles.ts
index 3719c844ed71..adf0bc061c62 100644
--- a/packages/eui/src/components/key_pad_menu/key_pad_menu_item.styles.ts
+++ b/packages/eui/src/components/key_pad_menu/key_pad_menu_item.styles.ts
@@ -14,6 +14,7 @@ import {
   logicalSizeCSS,
   euiCanAnimate,
   euiFontSize,
+  mathWithUnits,
 } from '../../global_styling';
 import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiScreenReaderOnly } from '../accessibility';
@@ -145,6 +146,20 @@ export const euiKeyPadMenuItemChildStyles = (euiThemeContext: UseEuiTheme) => {
       ${topRightChildren}
     `,
 
+    euiKeyPadMenuItem__betaBadgeLetter: css`
+      align-items: center;
+      border-radius: 50%;
+      display: inline-flex;
+      justify-content: center;
+      line-height: 1;
+      padding: 0;
+
+      ${logicalSizeCSS(
+        mathWithUnits(euiTheme.size.base, (base) => base * 1.25)
+      )}
+      ${logicalCSS('max-width', 'none')}
+    `,
+
     euiKeyPadMenuItem__checkableInput: css`
       position: absolute;
       ${topRightChildren}
diff --git a/packages/eui/src/components/key_pad_menu/key_pad_menu_item.tsx b/packages/eui/src/components/key_pad_menu/key_pad_menu_item.tsx
index a4d2533a6bd3..28817c98134f 100644
--- a/packages/eui/src/components/key_pad_menu/key_pad_menu_item.tsx
+++ b/packages/eui/src/components/key_pad_menu/key_pad_menu_item.tsx
@@ -29,7 +29,7 @@ import {
   PropsForButton,
 } from '../common';
 
-import { EuiBetaBadge } from '../badge/beta_badge';
+import { EuiBadge } from '../badge';
 import { IconType } from '../icon';
 import { EuiRadio, EuiCheckbox } from '../form';
 import { validateHref } from '../../services/security/href_validator';
@@ -248,16 +248,20 @@ export const EuiKeyPadMenuItem: FunctionComponent<EuiKeyPadMenuItemProps> = ({
     if (!betaBadgeLabel) return;
 
     return (
-      <EuiBetaBadge
-        // Since we move the tooltip contents to a wrapping EuiToolTip,
-        // this badge is purely visual therefore we can safely hide it from screen readers
+      <EuiBadge
+        // Beta copy is provided by the wrapping `EuiToolTip` using `betaBadgeLabel`,
+        // so we can safely hide this badge from screen readers to avoid duplicated announcements.
+        // It's a visual cue only and doesn't provide any additional information.
         aria-hidden="true"
-        size="s"
-        color="subdued"
         className="euiKeyPadMenuItem__betaBadge"
-        css={childStyles.euiKeyPadMenuItem__betaBadge}
-        label={betaBadgeLabel.charAt(0)}
-        iconType={betaBadgeIconType}
+        css={[
+          childStyles.euiKeyPadMenuItem__betaBadge,
+          !betaBadgeIconType && childStyles.euiKeyPadMenuItem__betaBadgeLetter,
+        ]}
+        // If an icon type is provided, use it, otherwise use the first letter of the label.
+        {...(betaBadgeIconType
+          ? { iconType: betaBadgeIconType }
+          : { children: betaBadgeLabel.charAt(0) })}
       />
     );
   }, [betaBadgeLabel, betaBadgeIconType, childStyles]);
diff --git a/packages/website/docs/components/containers/card.mdx b/packages/website/docs/components/containers/card.mdx
index 8553f6c46058..f7ff1bea42b8 100644
--- a/packages/website/docs/components/containers/card.mdx
+++ b/packages/website/docs/components/containers/card.mdx
@@ -185,7 +185,7 @@ export default () => (
 
 ### Beta badge
 
-If the card links to or references a module that is not GA (beta, lab, etc), you can add a `betaBadgeProps.label` and `betaBadgeProps.tooltipContent` to the card and it will properly create and position an **EuiBetaBadge**. If you want to change the title of the tooltip, supply a `betaBadgeProps.title` prop.
+If the card links to or references a module that is not GA (beta, lab, etc), pass `betaBadgeProps.children` for the badge text and `betaBadgeTooltipProps.content` (and optionally `betaBadgeTooltipProps.title`) for the tooltip. **EuiCard** positions an **EuiBadge** and wraps it in **EuiToolTip** when tooltip props are provided.
 
 ```tsx interactive
 import React from 'react';
@@ -199,9 +199,9 @@ export default () => (
         title="Dashboards"
         description="Example of a card's description. Stick to one or two sentences."
         onClick={() => {}}
-        betaBadgeProps={{
-          label: 'Beta',
-          tooltipContent:
+        betaBadgeProps={{ children: 'Beta' }}
+        betaBadgeTooltipProps={{
+          content:
             'This module is not GA. Please help us by reporting any bugs.',
         }}
       />
@@ -211,10 +211,9 @@ export default () => (
         icon={<EuiIcon size="xxl" type="monitoringApp" />}
         title="Monitoring"
         description="Example of a card's description. Stick to one or two sentences."
-        betaBadgeProps={{
-          label: 'Accent',
-          color: 'accent',
-          tooltipContent:
+        betaBadgeProps={{ children: 'Accent', color: 'accent' }}
+        betaBadgeTooltipProps={{
+          content:
             'You can change the badge color using betaBadgeProps.color.',
         }}
         onClick={() => {}}
@@ -225,13 +224,15 @@ export default () => (
         icon={<EuiIcon size="xxl" type="lensApp" />}
         title="Lens"
         isDisabled
-        description="Disabled cards can have active links using EuiBetaBadge."
+        description="Disabled cards can have active links using EuiBadge."
         betaBadgeProps={{
           href: 'http://www.elastic.co/subscriptions',
           target: '_blank',
-          label: 'Basic',
-          tooltipContent:
-            'Disabled cards with still clickable badges will stay hollow.',
+          children: 'Basic',
+        }}
+        betaBadgeTooltipProps={{
+          content:
+            'Disabled cards that have clickable badges will stay hollow.',
         }}
         onClick={() => {}}
       />
@@ -615,9 +616,9 @@ export default () => (
         title="Transparent"
         display="transparent"
         description="This one doesn't have a background color anymore."
-        betaBadgeProps={{
-          label: 'Beta',
-          tooltipContent:
+        betaBadgeProps={{ children: 'Beta' }}
+        betaBadgeTooltipProps={{
+          content:
             'This module is not GA. Please help us by reporting any bugs.',
         }}
         onClick={() => {}}
diff --git a/packages/website/docs/components/containers/flyout/_session_management.mdx b/packages/website/docs/components/containers/flyout/_session_management.mdx
index dff822fdab6e..e65a99a63546 100644
--- a/packages/website/docs/components/containers/flyout/_session_management.mdx
+++ b/packages/website/docs/components/containers/flyout/_session_management.mdx
@@ -1,10 +1,10 @@
 ```mdx-code-block
-import { EuiBetaBadge } from '@elastic/eui';
+import { BetaBadge } from '@site/src/components/beta_badge';
 ```
 
-### Session management <EuiBetaBadge size="s" label="Beta" color="accent" /> {#flyout-session-management}
+### Session management <BetaBadge /> <span id="flyout-session-management"></span>
 
-EuiFlyout comes with opt-in flyout session management built in that lets you
+**EuiFlyout** comes with opt-in flyout session management built in that lets you
 effortlessly create complex flyout compositions and journeys.
 It handles side-by-side flyout rendering based on parent-child grouping,
 simple flyout transitions, state sharing, and more.
diff --git a/packages/website/docs/components/containers/flyout/index.mdx b/packages/website/docs/components/containers/flyout/index.mdx
index 3a0716165d39..5499b16162f6 100644
--- a/packages/website/docs/components/containers/flyout/index.mdx
+++ b/packages/website/docs/components/containers/flyout/index.mdx
@@ -1038,10 +1038,10 @@ Resize clamping and responsive breakpoints use the container's width as the refe
 Child flyouts automatically inherit the `container` from the parent flyout's context. There is no need to pass the prop explicitly to child flyouts. To use the document body as the reference container for a child (overriding an inherited container), pass `container={null}`.
 
 ```mdx-code-block
-import { EuiBetaBadge } from '@elastic/eui';
+import { BetaBadge } from '@site/src/components/beta_badge';
 ```
 
-### Flyout menu <EuiBetaBadge size="s" label="Beta" color="accent" /> {#flyout-menu}
+### Flyout menu <BetaBadge /> <span id="flyout-menu"></span>
 
 import FlyoutMenu from './_flyout_menu.mdx';
 
diff --git a/packages/website/docs/components/display/badge/index.mdx b/packages/website/docs/components/display/badge/index.mdx
index 53f82759daf4..d662fc9ac6f2 100644
--- a/packages/website/docs/components/display/badge/index.mdx
+++ b/packages/website/docs/components/display/badge/index.mdx
@@ -25,7 +25,11 @@ import NotificationBadge from './_notification_badge.mdx';
 
 <NotificationBadge />
 
-### Beta badge
+```mdx-code-block
+import { DeprecatedBadge } from '@site/src/components/deprecated_badge';
+```
+
+### Beta badge <DeprecatedBadge />
 
 import BetaBadge from './_beta_badge.mdx';
 
diff --git a/packages/website/docs/components/navigation/buttons/button.mdx b/packages/website/docs/components/navigation/buttons/button.mdx
index 35678eec4346..37f261035dd1 100644
--- a/packages/website/docs/components/navigation/buttons/button.mdx
+++ b/packages/website/docs/components/navigation/buttons/button.mdx
@@ -588,9 +588,12 @@ export default () => {
   );
 };
 ```
-import { EuiBetaBadge } from '@elastic/eui';
 
-### Disabled and focusable <EuiBetaBadge label="Beta" color="accent" />
+```mdx-code-block
+import { BetaBadge } from '@site/src/components/beta_badge';
+```
+
+### Disabled and focusable <BetaBadge />
 
 :::info Natively disabled buttons are not focusable
 By default, when using `isDisabled` or `disabled` on **EuiButton**, the button will render with the native `disabled` attribute, making it unfocusable.
diff --git a/packages/website/docs/components/navigation/buttons/key-pad-menu.mdx b/packages/website/docs/components/navigation/buttons/key-pad-menu.mdx
index cd8fff1037c8..4fd6d05a186b 100644
--- a/packages/website/docs/components/navigation/buttons/key-pad-menu.mdx
+++ b/packages/website/docs/components/navigation/buttons/key-pad-menu.mdx
@@ -145,9 +145,9 @@ export default () => {
 
 ## Beta item
 
-If the item links to a module that is not GA (beta, lab, etc), you can add a `betaBadgeLabel` and `betaBadgeTooltipContent` to the card and it will properly create and position an [EuiBetaBadge](../../display/badge/index.mdx#beta-badge).
+If the item links to a module that is not GA (beta, lab, etc), you can add a `betaBadgeLabel` and `betaBadgeTooltipContent` to the menu item and it will properly create and position an [EuiBadge](../../display/badge/index.mdx).
 
-Supplying just a label will only show the first letter in the badge but displays the full label to the tooltip. You can also pass an `iconType` to replace the letter.
+Supplying just a label will only show the first letter in the badge but displays the full label to the tooltip. You can also pass a `betaBadgeIconType` to replace the letter.
 
 ```tsx interactive
 import React from 'react';
@@ -176,6 +176,14 @@ export default () => (
     >
       <EuiIcon type="code" size="l" />
     </EuiKeyPadMenuItem>
+
+    <EuiKeyPadMenuItem
+      label="Icon"
+      betaBadgeLabel="External"
+      betaBadgeTooltipContent="This module is an external app."
+    >
+      <EuiIcon type="code" size="l" />
+    </EuiKeyPadMenuItem>
   </EuiKeyPadMenu>
 );
 ```
diff --git a/packages/website/docs/components/tables/basic.mdx b/packages/website/docs/components/tables/basic.mdx
index b42b7bd01e4c..f0588c7245da 100644
--- a/packages/website/docs/components/tables/basic.mdx
+++ b/packages/website/docs/components/tables/basic.mdx
@@ -1384,10 +1384,10 @@ export default () => {
 ```
 
 ```mdx-code-block
-import { EuiBetaBadge } from '@elastic/eui';
+import { BetaBadge } from '@site/src/components/beta_badge';
 ```
 
-### Inline scrolling <EuiBetaBadge size="s" color="accent" label="Beta" /> {#inline-scrolling}
+### Inline scrolling <BetaBadge /> <span id="inline-scrolling"></span>
 
 **EuiBasicTable** supports inline (horizontal) scrolling on overflow, which can be
 enabled by setting `scrollableInline={true}`. It sets the minimum table width
diff --git a/packages/website/docs/getting-started/theming/high-contrast-mode.mdx b/packages/website/docs/getting-started/theming/high-contrast-mode.mdx
index 51f4e4d18760..c65d30962bc9 100644
--- a/packages/website/docs/getting-started/theming/high-contrast-mode.mdx
+++ b/packages/website/docs/getting-started/theming/high-contrast-mode.mdx
@@ -3,9 +3,11 @@ title: High contrast mode
 sidebar_position: 4
 ---
 
-import { EuiBetaBadge } from '@elastic/eui';
+```mdx-code-block
+import { BetaBadge } from '@site/src/components/beta_badge';
+```
 
-# High contrast mode <EuiBetaBadge label="Beta" color="accent" />
+# High contrast mode <BetaBadge />
 
 The `highContrastMode` determines and sets certain un-overrideable modifications to the EUI theme, primarily around borders and shadows. Borders will always be pure black or white (depending on the color mode), and shadows will be entirely replaced with borders.
 
diff --git a/packages/website/docs/utilities/accessibility/index.mdx b/packages/website/docs/utilities/accessibility/index.mdx
index 579cf26a6a64..085ce8416fb8 100644
--- a/packages/website/docs/utilities/accessibility/index.mdx
+++ b/packages/website/docs/utilities/accessibility/index.mdx
@@ -190,9 +190,11 @@ This is primarily useful for announcing navigation or page changes, when program
   ```
 </Demo>
 
-import { EuiBetaBadge } from '@elastic/eui';
+```mdx-code-block
+import { BetaBadge } from '@site/src/components/beta_badge';
+```
 
-## Live announcer region <EuiBetaBadge label="Beta" color="accent" />
+## Live announcer region <BetaBadge />
 
 :::warning `EuiLiveAnnouncer` is a new, experimental alternative to `EuiScreenReaderLive` for screen reader live region announcements. 
 Its API and behavior may change based on feedback and testing.
diff --git a/packages/website/docs/utilities/container-queries.mdx b/packages/website/docs/utilities/container-queries.mdx
index bb50a0b50d55..907fcfaf700f 100644
--- a/packages/website/docs/utilities/container-queries.mdx
+++ b/packages/website/docs/utilities/container-queries.mdx
@@ -2,9 +2,11 @@
 title: Container queries
 ---
 
-import { EuiBetaBadge } from '@elastic/eui';
+```mdx-code-block
+import { BetaBadge } from '@site/src/components/beta_badge';
+```
 
-# Container queries <EuiBetaBadge label="Beta" color="accent" />
+# Container queries <BetaBadge />
 
 Container queries allow you to create styles that adapt based on the available
 space within element's parent container, rather than the entire browser
diff --git a/packages/website/docs/utilities/provider.mdx b/packages/website/docs/utilities/provider.mdx
index 3ed2d2f8946f..c8aa64c335fb 100644
--- a/packages/website/docs/utilities/provider.mdx
+++ b/packages/website/docs/utilities/provider.mdx
@@ -4,7 +4,10 @@ keywords: [EuiProvider]
 
 # Provider
 
-import { EuiBetaBadge, EuiSpacer } from '@elastic/eui';
+```mdx-code-block
+import { EuiSpacer } from '@elastic/eui';
+import { BetaBadge } from '@site/src/components/beta_badge';
+```
 
 **EuiProvider** contains all necessary context providers required for full functionality and styling of EUI. A single instance of **EuiProvider** should exist at the top level of your app, where functionality will flow down the component tree.
 
@@ -88,7 +91,7 @@ For most applications, the above configuration will be enough to have styles ord
 
 Any other options available with <a href="https://emotion.sh/docs/@emotion/cache#createcache" target="_blank" rel="noopener noreferrer">**the createCache API**</a> will be respected by EUI. Note that EUI does not include the `@emotion/cache` library, so you will need to add it to your application dependencies.
 
-## Component defaults <EuiBetaBadge alignment="middle" label="Beta" size="s" color="accent" />
+## Component defaults <BetaBadge />
 
 :::info Beta status
 
diff --git a/packages/website/src/components/beta_badge/beta_badge.tsx b/packages/website/src/components/beta_badge/beta_badge.tsx
new file mode 100644
index 000000000000..d63c88c5a440
--- /dev/null
+++ b/packages/website/src/components/beta_badge/beta_badge.tsx
@@ -0,0 +1,31 @@
+/*
+ * 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, { EuiBadge, EuiToolTip } from '@elastic/eui';
+
+type BetaBadgeProps = {
+  color?: 'hollow' | 'accent';
+  tooltipContent?: string;
+};
+
+export const BetaBadge = ({
+  color = 'accent',
+  tooltipContent,
+}: BetaBadgeProps) => {
+  const badge = (
+    <EuiBadge color={color} iconType="beta" fill>
+      BETA
+    </EuiBadge>
+  );
+
+  if (tooltipContent) {
+    return <EuiToolTip content={tooltipContent}>{badge}</EuiToolTip>;
+  }
+
+  return badge;
+};
diff --git a/packages/website/src/components/beta_badge/index.ts b/packages/website/src/components/beta_badge/index.ts
new file mode 100644
index 000000000000..54cc301a8037
--- /dev/null
+++ b/packages/website/src/components/beta_badge/index.ts
@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { BetaBadge } from './beta_badge';
diff --git a/packages/website/src/components/deprecated_badge/deprecated_badge.tsx b/packages/website/src/components/deprecated_badge/deprecated_badge.tsx
new file mode 100644
index 000000000000..7b2a8c0a42b4
--- /dev/null
+++ b/packages/website/src/components/deprecated_badge/deprecated_badge.tsx
@@ -0,0 +1,31 @@
+/*
+ * 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, { EuiBadge, EuiToolTip } from '@elastic/eui';
+
+type DeprecatedBadgeProps = {
+  color?: 'subdued' | 'warning';
+  tooltipContent?: string;
+};
+
+export const DeprecatedBadge = ({
+  color = 'warning',
+  tooltipContent,
+}: DeprecatedBadgeProps) => {
+  const badge = (
+    <EuiBadge color={color} iconType="archive" fill>
+      DEPRECATED
+    </EuiBadge>
+  );
+
+  if (tooltipContent) {
+    return <EuiToolTip content={tooltipContent}>{badge}</EuiToolTip>;
+  }
+
+  return badge;
+};
diff --git a/packages/website/src/components/deprecated_badge/index.ts b/packages/website/src/components/deprecated_badge/index.ts
new file mode 100644
index 000000000000..0d742cc1cc64
--- /dev/null
+++ b/packages/website/src/components/deprecated_badge/index.ts
@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { DeprecatedBadge } from './deprecated_badge';