diff --git a/core/api.txt b/core/api.txt
index 2c51469de6c..35661f491f3 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -314,6 +314,7 @@ ion-backdrop,event,ionBackdropTap,void,true
 
 ion-badge,shadow
 ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-badge,prop,hue,"bold" | "subtle" | undefined,undefined,false,false
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
 ion-badge,prop,shape,"round | rectangular" | "soft" | undefined,undefined,false,false
 ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 43ae3a07dc7..f7b03873c24 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -429,6 +429,10 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors.  Only applies to the `ionic` theme.
+         */
+        "hue"?: 'bold' | 'subtle';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -5870,6 +5874,10 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors.  Only applies to the `ionic` theme.
+         */
+        "hue"?: 'bold' | 'subtle';
         /**
           * The mode determines the platform behaviors of the component.
          */
diff --git a/core/src/components/badge/badge.common.scss b/core/src/components/badge/badge.common.scss
index b751d670dd1..89a0bc756f1 100644
--- a/core/src/components/badge/badge.common.scss
+++ b/core/src/components/badge/badge.common.scss
@@ -43,11 +43,6 @@
   vertical-align: baseline;
 }
 
-:host(.ion-color) {
-  background: #{color.current-color(base)};
-  color: #{color.current-color(contrast)};
-}
-
 // Badge (hint)
 // --------------------------------------------------
 
diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss
index 8ec11b4d7bd..5ea873efd6b 100644
--- a/core/src/components/badge/badge.ionic.scss
+++ b/core/src/components/badge/badge.ionic.scss
@@ -5,8 +5,6 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{globals.ion-color(primary, base)};
-  --color: #{globals.ion-color(primary, contrast)};
   --padding-start: #{globals.$ion-space-200};
   --padding-end: #{globals.$ion-space-200};
   --padding-top: #{globals.$ion-space-0};
@@ -20,6 +18,32 @@
   font-weight: globals.$ion-font-weight-medium;
 }
 
+// Bold Badge
+// --------------------------------------------------
+
+:host(.badge-bold) {
+  --background: #{globals.ion-color(primary, base)};
+  --color: #{globals.ion-color(primary, contrast)};
+}
+
+:host(.badge-bold.ion-color) {
+  background: globals.current-color(base);
+  color: globals.current-color(contrast);
+}
+
+// Subtle Badge
+// --------------------------------------------------
+
+:host(.badge-subtle) {
+  --background: #{globals.ion-color(primary, base, $subtle: true)};
+  --color: #{globals.ion-color(primary, contrast, $subtle: true)};
+}
+
+:host(.badge-subtle.ion-color) {
+  background: globals.current-color(base, $subtle: true);
+  color: globals.current-color(contrast, $subtle: true);
+}
+
 // Badge Shapes
 // --------------------------------------------------
 
diff --git a/core/src/components/badge/badge.native.scss b/core/src/components/badge/badge.native.scss
index ab862cca701..25e46177f43 100644
--- a/core/src/components/badge/badge.native.scss
+++ b/core/src/components/badge/badge.native.scss
@@ -12,6 +12,11 @@
   font-family: $font-family-base;
 }
 
+:host(.ion-color) {
+  background: current-color(base);
+  color: current-color(contrast);
+}
+
 // TODO(ROU-10747): Review size styles when sizes are defined for native themes.
 :host([vertical]:not(.in-button):not(.in-tab-button)),
 :host(:empty) {
diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx
index bf100a22de0..a346dac4126 100644
--- a/core/src/components/badge/badge.tsx
+++ b/core/src/components/badge/badge.tsx
@@ -28,6 +28,14 @@ export class Badge implements ComponentInterface {
    */
   @Prop({ reflect: true }) color?: Color;
 
+  /**
+   * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for
+   * a badge with muted, subtle colors.
+   *
+   * Only applies to the `ionic` theme.
+   */
+  @Prop() hue?: 'bold' | 'subtle';
+
   /**
    * Set to `"rectangular"` for non-rounded corners.
    * Set to `"soft"` for slightly rounded corners.
@@ -87,7 +95,33 @@ export class Badge implements ComponentInterface {
     return size;
   }
 
+  // The 'subtle' hue is the default for badges containing text or icons
+  // The 'bold' hue is used when inside of an avatar, button, tab button,
+  // or when the badge is empty (no text or icon).
+  private getHue(): string | undefined {
+    const { hue } = this;
+
+    if (hue !== undefined) {
+      return hue;
+    }
+
+    const inAvatar = hostContext('ion-avatar', this.el);
+    const inButton = hostContext('ion-button', this.el);
+    const inTabButton = hostContext('ion-tab-button', this.el);
+    const hasContent = this.el.textContent?.trim() !== '' || this.el.querySelector('ion-icon') !== null;
+
+    // Return 'bold' if the badge is inside an avatar, button, tab button,
+    // or has no content
+    if (inAvatar || inButton || inTabButton || !hasContent) {
+      return 'bold';
+    }
+
+    // Return 'subtle' if the badge contains visible text or an icon
+    return 'subtle';
+  }
+
   render() {
+    const hue = this.getHue();
     const shape = this.getShape();
     const size = this.getSize();
     const theme = getIonTheme(this);
@@ -96,6 +130,7 @@ export class Badge implements ComponentInterface {
       <Host
         class={createColorClasses(this.color, {
           [theme]: true,
+          [`badge-${hue}`]: hue !== undefined,
           [`badge-${shape}`]: shape !== undefined,
           [`badge-${size}`]: size !== undefined,
           [`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png
index e2b762b7d16..3d2dad6cb35 100644
Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png
index b8319e18a58..91075e0110a 100644
Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Safari-linux.png
index efc3d5a5d4a..73e58a853ed 100644
Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png
index a54fa53c8f0..ee4d5dffda2 100644
Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png
index b1d327bb722..03566d3d467 100644
Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Safari-linux.png
index 1643cc5ca8b..822b4bc5cf5 100644
Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hue/badge.e2e.ts b/core/src/components/badge/test/hue/badge.e2e.ts
new file mode 100644
index 00000000000..30dff8bc483
--- /dev/null
+++ b/core/src/components/badge/test/hue/badge.e2e.ts
@@ -0,0 +1,80 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('badge: hue'), () => {
+    test('should render subtle badges', async ({ page }) => {
+      await page.setContent(
+        `
+        <div id="container">
+          <ion-badge>99</ion-badge>
+          <ion-badge color="primary">99</ion-badge>
+          <ion-badge color="secondary">99</ion-badge>
+          <ion-badge color="tertiary">99</ion-badge>
+          <ion-badge color="success">99</ion-badge>
+          <ion-badge color="warning">99</ion-badge>
+          <ion-badge color="danger">99</ion-badge>
+          <ion-badge color="light">99</ion-badge>
+          <ion-badge color="medium">99</ion-badge>
+          <ion-badge color="dark">99</ion-badge>
+
+          <br>
+
+          <ion-badge><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+          <ion-badge color="primary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+          <ion-badge color="secondary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+          <ion-badge color="tertiary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+          <ion-badge color="success"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+          <ion-badge color="warning"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+          <ion-badge color="danger"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+          <ion-badge color="light"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+          <ion-badge color="medium"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+          <ion-badge color="dark"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`badge-hue-subtle`));
+    });
+
+    test('should render bold badges', async ({ page }) => {
+      await page.setContent(
+        `
+        <div id="container">
+          <ion-badge hue="bold">99</ion-badge>
+          <ion-badge hue="bold" color="primary">99</ion-badge>
+          <ion-badge hue="bold" color="secondary">99</ion-badge>
+          <ion-badge hue="bold" color="tertiary">99</ion-badge>
+          <ion-badge hue="bold" color="success">99</ion-badge>
+          <ion-badge hue="bold" color="warning">99</ion-badge>
+          <ion-badge hue="bold" color="danger">99</ion-badge>
+          <ion-badge hue="bold" color="light">99</ion-badge>
+          <ion-badge hue="bold" color="medium">99</ion-badge>
+          <ion-badge hue="bold" color="dark">99</ion-badge>
+
+          <br>
+
+          <ion-badge hue="bold"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+          <ion-badge hue="bold" color="primary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+          <ion-badge hue="bold" color="secondary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+          <ion-badge hue="bold" color="tertiary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+          <ion-badge hue="bold" color="success"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+          <ion-badge hue="bold" color="warning"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+          <ion-badge hue="bold" color="danger"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+          <ion-badge hue="bold" color="light"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+          <ion-badge hue="bold" color="medium"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+          <ion-badge hue="bold" color="dark"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`badge-hue-bold`));
+    });
+  });
+});
diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a0cb339e6ba
Binary files /dev/null and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ce0fd0919b5
Binary files /dev/null and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..12baaf07a50
Binary files /dev/null and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d1c32ab97ca
Binary files /dev/null and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1340a1736a0
Binary files /dev/null and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..96a413b9ac2
Binary files /dev/null and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hue/index.html b/core/src/components/badge/test/hue/index.html
new file mode 100644
index 00000000000..d8e2dff3506
--- /dev/null
+++ b/core/src/components/badge/test/hue/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Badge - Hue</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Badge - Hue</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <h2>Badge Hue: Subtle</h2>
+        <ion-badge>99</ion-badge>
+        <ion-badge color="primary">99</ion-badge>
+        <ion-badge color="secondary">99</ion-badge>
+        <ion-badge color="tertiary">99</ion-badge>
+        <ion-badge color="success">99</ion-badge>
+        <ion-badge color="warning">99</ion-badge>
+        <ion-badge color="danger">99</ion-badge>
+        <ion-badge color="light">99</ion-badge>
+        <ion-badge color="medium">99</ion-badge>
+        <ion-badge color="dark">99</ion-badge>
+
+        <br />
+
+        <ion-badge><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        <ion-badge color="primary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        <ion-badge color="secondary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        <ion-badge color="tertiary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        <ion-badge color="success"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        <ion-badge color="warning"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        <ion-badge color="danger"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        <ion-badge color="light"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        <ion-badge color="medium"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        <ion-badge color="dark"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+
+        <h2>Badge Hue: Bold</h2>
+        <ion-badge hue="bold">99</ion-badge>
+        <ion-badge hue="bold" color="primary">99</ion-badge>
+        <ion-badge hue="bold" color="secondary">99</ion-badge>
+        <ion-badge hue="bold" color="tertiary">99</ion-badge>
+        <ion-badge hue="bold" color="success">99</ion-badge>
+        <ion-badge hue="bold" color="warning">99</ion-badge>
+        <ion-badge hue="bold" color="danger">99</ion-badge>
+        <ion-badge hue="bold" color="light">99</ion-badge>
+        <ion-badge hue="bold" color="medium">99</ion-badge>
+        <ion-badge hue="bold" color="dark">99</ion-badge>
+
+        <br />
+
+        <ion-badge hue="bold"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        <ion-badge hue="bold" color="primary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        <ion-badge hue="bold" color="secondary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        <ion-badge hue="bold" color="tertiary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        <ion-badge hue="bold" color="success"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        <ion-badge hue="bold" color="warning"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        <ion-badge hue="bold" color="danger"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        <ion-badge hue="bold" color="light"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        <ion-badge hue="bold" color="medium"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+        <ion-badge hue="bold" color="dark"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 4e26b0073b7..fdd68086f37 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
index c24feb38233..0a67c97bda2 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
index eb447d6c20e..f277497bfc0 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 110dbebfb5a..d3d3e6734da 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 1e67e0a412a..c4c76cd2c50 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
index 76b68d96fc8..eabff1259e3 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1bbb0df248b..29a4a2d697b 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 408e455f67f..3ae5b2e49f8 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index 796eadca1bc..b4f1f9b5df9 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 88e1c519dac..c765b6a7be0 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
index d5f508e6462..f5fda9a550b 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
index 123ccd94950..1b40ec3c294 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
index b6d16ebddc0..2cdda587ee2 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2eb61a88248..2cb8be6163c 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png
index 861ff45f2c2..0bb3f6af424 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f7abd9d925f..f9da077b6f6 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index bdedd5ae3d4..3c54015cb55 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index 843562cfb8e..99a952988ff 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 741be2cef90..ab05cf0ec5e 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2c3dd26ca6a..8a0ecb6e765 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
index 8931ada080f..c3bb1bae4c4 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png
index d24ffc0f9b4..b4dd3ad6298 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png
index ba64b2b4b4c..57a1f8db920 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png
index c8817c06757..1fc9ee1532c 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 680535df38e..fe31ff37d30 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 3881a83985d..418ffc5c8ea 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index 96b8121abd2..1cea0652c1f 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
index a71acf78ab2..f2c8fc42be2 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 21a5fbaa85a..faa81a96ea6 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
index 8f2b62f9743..d5bb7093d8f 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f72082e1b87..2b6d82f3246 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png
index cf615f0ea64..0702d7d1d6d 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png
index 2a1a59437eb..8bf2cdf23de 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 62ee863edf0..63566d420da 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index ac86d203880..463be82f535 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index 491d5b880e4..57878155ce3 100644
Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 17e99daffbe..1287ce77ae2 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 13ec8ea652f..62ef4a67a41 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
index 96ca7790cdf..075de41e044 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 968d8e2c1a7..6f93b4836fa 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
index eb760253083..ff9ed17ae5a 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png
index 7e0c36c2d01..3fd82502bbf 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 6841aaa37b6..c33f4a9d690 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 3414b9b7db5..c7dad3d9031 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index 8751244c872..dfac082e463 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 69ea3f140d8..f44bc8b318f 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 7e95082fd40..40bc6697f9a 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
index 6b9c41ad5aa..c7b45cda3af 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
index dafd78cf712..6983f67d329 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 6b858b31214..d49d91f9756 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png
index 7fb709dd0e0..65dff55d119 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1471d6a708a..b1a3b7908e0 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index eae2fd09efc..080abf7607f 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index be1501dd94d..44649615430 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 88e1c519dac..c765b6a7be0 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
index d5f508e6462..f5fda9a550b 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
index 123ccd94950..1b40ec3c294 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
index b6d16ebddc0..2cdda587ee2 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2eb61a88248..2cb8be6163c 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png
index 861ff45f2c2..0bb3f6af424 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f7abd9d925f..f9da077b6f6 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index bdedd5ae3d4..3c54015cb55 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index 843562cfb8e..99a952988ff 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 42803d147c0..dc0c71c7b27 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
index d29314edfda..c64525ee797 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
index 0b147056be1..28687c15137 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 18aadfc782a..80e44a263f2 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 3424dab7f64..ea4cf1df6f0 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png
index fbca4cd4a56..b2bbc83041c 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 4323eca0893..afbee046585 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index cf97b9458b4..eab3a741a33 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index f9933ab15fe..b207bdf7545 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
index deffee482dd..534010f45ac 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 864f0b602ab..083545db815 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
index 7035b5d6fd4..bcc7737384c 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 67d9ff611a1..349a1b0813b 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f49808a232a..c316cc8ebb9 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png
index 36f0dc06887..f8f2cf8ba1b 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f03ffddd041..6b73e4c480c 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 9283eb7b0a8..b0a17780b70 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index f646490f1d0..6cdb0cea864 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xsmall-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1eda10c3ee6..0f0da46ef71 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 43ce7439051..8c60e0bf282 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
index 45f5a21fd22..b869e9e0187 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png
index b88ae2794dc..8c2dd225697 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png
index d36f0c25468..5303981171b 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-ionic-md-ltr-light-Mobile-Safari-linux.png
index 365b5ff0870..66e3ab0ea57 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index aa24480382b..62dde4496e8 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index b4480f835d2..57c92199403 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index 7694d842338..3cbaae7bf5e 100644
Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/css/palettes/dark.scss b/core/src/css/palettes/dark.scss
index 279191a308b..1d154358b00 100644
--- a/core/src/css/palettes/dark.scss
+++ b/core/src/css/palettes/dark.scss
@@ -17,54 +17,63 @@ $colors: (
     contrast: #000,
     shade: get-color-shade($primary),
     tint: get-color-tint($primary),
+    foreground: $primary,
   ),
   secondary: (
     base: $secondary,
     contrast: #000,
     shade: get-color-shade($secondary),
     tint: get-color-tint($secondary),
+    foreground: $secondary,
   ),
   tertiary: (
     base: $tertiary,
     contrast: #000,
     shade: get-color-shade($tertiary),
     tint: get-color-tint($tertiary),
+    foreground: $tertiary,
   ),
   success: (
     base: $success,
     contrast: #000,
     shade: get-color-shade($success),
     tint: get-color-tint($success),
+    foreground: $success,
   ),
   warning: (
     base: $warning,
     contrast: #000,
     shade: get-color-shade($warning),
     tint: get-color-tint($warning),
+    foreground: $warning,
   ),
   danger: (
     base: $danger,
     contrast: #000,
     shade: get-color-shade($danger),
     tint: get-color-tint($danger),
+    foreground: $danger,
   ),
   light: (
     base: $light,
     contrast: #fff,
     shade: get-color-shade($light),
     tint: get-color-tint($light),
+    foreground: $light,
   ),
   medium: (
     base: $medium,
     contrast: #000,
     shade: get-color-shade($medium),
     tint: get-color-tint($medium),
+    foreground: $medium,
   ),
   dark: (
     base: $dark,
     contrast: #000,
     shade: get-color-shade($dark),
     tint: get-color-tint($dark),
+    foreground: $dark,
   ),
 );
 
diff --git a/core/src/css/palettes/high-contrast-dark.scss b/core/src/css/palettes/high-contrast-dark.scss
index 99756b5360a..2cfa3169550 100644
--- a/core/src/css/palettes/high-contrast-dark.scss
+++ b/core/src/css/palettes/high-contrast-dark.scss
@@ -17,54 +17,63 @@ $colors: (
     contrast: #000,
     shade: get-color-shade($primary),
     tint: get-color-tint($primary),
+    foreground: $primary,
   ),
   secondary: (
     base: $secondary,
     contrast: #000,
     shade: get-color-shade($secondary),
     tint: get-color-tint($secondary),
+    foreground: $secondary,
   ),
   tertiary: (
     base: $tertiary,
     contrast: #000,
     shade: get-color-shade($tertiary),
     tint: get-color-tint($tertiary),
+    foreground: $tertiary,
   ),
   success: (
     base: $success,
     contrast: #000,
     shade: get-color-shade($success),
     tint: get-color-tint($success),
+    foreground: $success,
   ),
   warning: (
     base: $warning,
     contrast: #000,
     shade: get-color-shade($warning),
     tint: get-color-tint($warning),
+    foreground: $warning,
   ),
   danger: (
     base: $danger,
     contrast: #000,
     shade: get-color-shade($danger),
     tint: get-color-tint($danger),
+    foreground: $danger,
   ),
   light: (
     base: $light,
     contrast: #fff,
     shade: get-color-shade($light),
     tint: get-color-tint($light),
+    foreground: $light,
   ),
   medium: (
     base: $medium,
     contrast: #000,
     shade: get-color-shade($medium),
     tint: get-color-tint($medium),
+    foreground: $medium,
   ),
   dark: (
     base: $dark,
     contrast: #000,
     shade: get-color-shade($dark),
     tint: get-color-tint($dark),
+    foreground: $dark,
   ),
 );
 
diff --git a/core/src/css/palettes/high-contrast.scss b/core/src/css/palettes/high-contrast.scss
index e6801629231..882f3ba0e90 100644
--- a/core/src/css/palettes/high-contrast.scss
+++ b/core/src/css/palettes/high-contrast.scss
@@ -17,54 +17,63 @@ $colors: (
     contrast: #fff,
     shade: get-color-shade($primary),
     tint: get-color-tint($primary),
+    foreground: $primary,
   ),
   secondary: (
     base: $secondary,
     contrast: #fff,
     shade: get-color-shade($secondary),
     tint: get-color-tint($secondary),
+    foreground: $secondary,
   ),
   tertiary: (
     base: $tertiary,
     contrast: #fff,
     shade: get-color-shade($tertiary),
     tint: get-color-tint($tertiary),
+    foreground: $tertiary,
   ),
   success: (
     base: $success,
     contrast: #fff,
     shade: get-color-shade($success),
     tint: get-color-tint($success),
+    foreground: $success,
   ),
   warning: (
     base: $warning,
     contrast: #fff,
     shade: get-color-shade($warning),
     tint: get-color-tint($warning),
+    foreground: $warning,
   ),
   danger: (
     base: $danger,
     contrast: #fff,
     shade: get-color-shade($danger),
     tint: get-color-tint($danger),
+    foreground: $danger,
   ),
   light: (
     base: $light,
     contrast: #000,
     shade: get-color-shade($light),
     tint: get-color-tint($light),
+    foreground: $light,
   ),
   medium: (
     base: $medium,
     contrast: #fff,
     shade: get-color-shade($medium),
     tint: get-color-tint($medium),
+    foreground: $medium,
   ),
   dark: (
     base: $dark,
     contrast: #fff,
     shade: get-color-shade($dark),
     tint: get-color-tint($dark),
+    foreground: $dark,
   ),
 );
 
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index 7aabf55c70a..c07c7e86f7e 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -261,14 +261,14 @@ export declare interface IonBackdrop extends Components.IonBackdrop {
 
 
 @ProxyCmp({
-  inputs: ['color', 'mode', 'shape', 'size', 'theme', 'vertical']
+  inputs: ['color', 'hue', 'mode', 'shape', 'size', 'theme', 'vertical']
 })
 @Component({
   selector: 'ion-badge',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'mode', 'shape', 'size', 'theme', 'vertical'],
+  inputs: ['color', 'hue', 'mode', 'shape', 'size', 'theme', 'vertical'],
 })
 export class IonBadge {
   protected el: HTMLIonBadgeElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index 532da1596ec..5747b3f5b1b 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -350,14 +350,14 @@ export declare interface IonBackdrop extends Components.IonBackdrop {
 
 @ProxyCmp({
   defineCustomElementFn: defineIonBadge,
-  inputs: ['color', 'mode', 'shape', 'size', 'theme', 'vertical']
+  inputs: ['color', 'hue', 'mode', 'shape', 'size', 'theme', 'vertical']
 })
 @Component({
   selector: 'ion-badge',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'mode', 'shape', 'size', 'theme', 'vertical'],
+  inputs: ['color', 'hue', 'mode', 'shape', 'size', 'theme', 'vertical'],
   standalone: true
 })
 export class IonBadge {
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 48c3a2444ef..9cb538c341c 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -130,6 +130,7 @@ export const IonBackdrop: StencilVueComponent<JSX.IonBackdrop> = /*@__PURE__*/ d
 
 export const IonBadge: StencilVueComponent<JSX.IonBadge> = /*@__PURE__*/ defineContainer<JSX.IonBadge>('ion-badge', defineIonBadge, [
   'color',
+  'hue',
   'shape',
   'size',
   'vertical'