diff --git a/core/src/components/badge/badge.common.scss b/core/src/components/badge/badge.common.scss
index b394d98934b..47dfa9d0d08 100644
--- a/core/src/components/badge/badge.common.scss
+++ b/core/src/components/badge/badge.common.scss
@@ -51,15 +51,15 @@
 // Badge Empty (hint)
 // --------------------------------------------------
 
-:host([vertical]) {
+:host([vertical]:not(.in-tab-button)) {
   @include position(null, 0, null, null);
   position: absolute;
 }
 
-:host(:empty.badge-vertical-top) {
+:host(:not(.in-tab-button):empty.badge-vertical-top) {
   top: 0;
 }
 
-:host(:empty.badge-vertical-bottom) {
+:host(:not(.in-tab-button):empty.badge-vertical-bottom) {
   bottom: 0;
 }
diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss
index 8e6eb2ff9da..b8f1504d83d 100644
--- a/core/src/components/badge/badge.ionic.scss
+++ b/core/src/components/badge/badge.ionic.scss
@@ -174,3 +174,19 @@
   min-width: globals.$ion-scale-400;
   height: globals.$ion-scale-400;
 }
+
+// Badge Inside Tab Button
+// --------------------------------------------------
+
+:host([vertical].in-tab-button) {
+  position: relative;
+}
+
+// Badge Icon when Inside Tab Button
+:host([vertical].in-tab-button) ::slotted(ion-icon) {
+  @include globals.position(50%, null, null, 50%);
+
+  position: absolute;
+
+  transform: translate(-50%, -50%);
+}
diff --git a/core/src/components/badge/badge.ios.scss b/core/src/components/badge/badge.ios.scss
index e48c325e12d..2d61ad713f9 100644
--- a/core/src/components/badge/badge.ios.scss
+++ b/core/src/components/badge/badge.ios.scss
@@ -16,3 +16,23 @@
    */
   font-size: dynamic-font-min(1, $badge-baseline-font-size);
 }
+
+// Badge Inside Tab Button
+// --------------------------------------------------
+
+:host([vertical].in-tab-button) {
+  position: relative;
+
+  min-width: $badge-ios-in-tab-button-min-width;
+}
+
+:host([vertical].in-tab-button) ::slotted(ion-icon) {
+  @include position(50%, null, null, 50%);
+
+  position: absolute;
+
+  width: $badge-ios-in-tab-button-icon-size;
+  height: $badge-ios-in-tab-button-icon-size;
+
+  transform: translate(-50%, -50%);
+}
diff --git a/core/src/components/badge/badge.ios.vars.scss b/core/src/components/badge/badge.ios.vars.scss
index c0c42d4a3ca..a9294899dc1 100644
--- a/core/src/components/badge/badge.ios.vars.scss
+++ b/core/src/components/badge/badge.ios.vars.scss
@@ -5,3 +5,15 @@
 
 /// @prop - Border radius of the badge
 $badge-ios-border-radius: 10px;
+
+// Badge inside a Tab Button
+// --------------------------------------------------
+
+/// @prop - Minimum width of the badge inside a Tab Button
+$badge-ios-in-tab-button-min-width: 8px;
+
+/// @prop - Height of the badge inside a Tab Button
+$badge-ios-in-tab-button-height: 8px;
+
+/// @prop - Badge icon size inside a Tab Button
+$badge-ios-in-tab-button-icon-size: 12px;
diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx
index 353056c39d3..4164952a15f 100644
--- a/core/src/components/badge/badge.tsx
+++ b/core/src/components/badge/badge.tsx
@@ -1,6 +1,6 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Host, Prop, h } from '@stencil/core';
-import { createColorClasses } from '@utils/theme';
+import { Component, Element, Host, Prop, h } from '@stencil/core';
+import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonTheme } from '../../global/ionic-global';
 import type { Color } from '../../interface';
@@ -19,6 +19,8 @@ import type { Color } from '../../interface';
   shadow: true,
 })
 export class Badge implements ComponentInterface {
+  @Element() el!: HTMLElement;
+
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -89,6 +91,7 @@ export class Badge implements ComponentInterface {
     const shape = this.getShape();
     const size = this.getSize();
     const theme = getIonTheme(this);
+
     return (
       <Host
         class={createColorClasses(this.color, {
@@ -96,6 +99,7 @@ export class Badge implements ComponentInterface {
           [`badge-${shape}`]: shape !== undefined,
           [`badge-${size}`]: size !== undefined,
           [`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
+          'in-tab-button': hostContext('ion-tab-button', this.el),
         })}
       >
         <slot></slot>
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts b/core/src/components/badge/test/hint/badge.e2e.ts
index 1446f106e0c..a9cd712daab 100644
--- a/core/src/components/badge/test/hint/badge.e2e.ts
+++ b/core/src/components/badge/test/hint/badge.e2e.ts
@@ -21,4 +21,22 @@ configs({ directions: ['ltr'], modes: ['md', 'ios', 'ionic-md'] }).forEach(({ co
       await expect(container).toHaveScreenshot(screenshot(`badge-hint-avatar`));
     });
   });
+
+  test.describe(title('badge: hint inside tab button'), () => {
+    test('should not have visual regressions when icon is on the top', async ({ page }) => {
+      await page.goto('/src/components/badge/test/hint', config);
+
+      const container = page.locator('#tab-button');
+
+      await expect(container).toHaveScreenshot(screenshot(`badge-hint-tab-button-icon-top`));
+    });
+
+    test('should not have visual regressions when icon is at the bottom', async ({ page }) => {
+      await page.goto('/src/components/badge/test/hint', config);
+
+      const container = page.locator('#tab-button-icon-bottom');
+
+      await expect(container).toHaveScreenshot(screenshot(`badge-hint-tab-button-icon-bottom`));
+    });
+  });
 });
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 85c42a2e2d9..a20aa73400a 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 2611fd30aac..56b5c11197b 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Chrome-linux.png
index 7c3f05a2951..e5d1bb184e5 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..282b831a5f5
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1953a6888ca
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2b105a7a765
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..bb8cacee065
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..0ccca50e74e
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fd16c7345a5
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f2bee3c0ba7
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2c805e55881
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fa2d0ff607b
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a0d143bf408
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..466738d20df
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b2100d4a1d4
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..db9a258c344
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..aa62f9847d6
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4c870ab752d
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a5ba2ae0b77
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..10543e52687
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..91d211e9ddd
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hint/index.html b/core/src/components/badge/test/hint/index.html
index 1219fdac763..cafcdf170e6 100644
--- a/core/src/components/badge/test/hint/index.html
+++ b/core/src/components/badge/test/hint/index.html
@@ -12,6 +12,12 @@
     <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>
+
+    <style>
+      ion-tab-bar {
+        width: 100%;
+      }
+    </style>
   </head>
 
   <body>
@@ -45,6 +51,7 @@
           <ion-list-header>
             <ion-label> Inside Avatar </ion-label>
           </ion-list-header>
+
           <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
             <ion-avatar size="xxsmall">
               <img src="/src/components/avatar/test/avatar.svg" />
@@ -98,6 +105,136 @@
             </ion-avatar>
           </div>
         </ion-list>
+
+        <ion-list id="tab-button">
+          <ion-list-header>
+            <ion-label> Inside Tab Button - Top Icon </ion-label>
+          </ion-list-header>
+
+          <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
+            <ion-tab-bar>
+              <ion-tab-button href="" tab="tab-one">
+                <ion-label>Tab One</ion-label>
+                <ion-icon name="star"></ion-icon>
+                <ion-badge size="xxsmall" vertical="top" color="danger">9</ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="schedule" class="e2eTabTwoButton">
+                <ion-label>Tab Two</ion-label>
+                <ion-icon name="globe"></ion-icon>
+                <ion-badge size="xxsmall" vertical="top" color="primary">
+                  <ion-icon name="star"></ion-icon>
+                </ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-three">
+                <ion-label>Tab Three</ion-label>
+                <ion-icon name="logo-facebook"></ion-icon>
+                <ion-badge size="xxsmall" vertical="top" color="warning">999</ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-four" class="e2eTabFourButton">
+                <ion-label>Tab Four</ion-label>
+                <ion-icon name="chatbox"></ion-icon>
+                <ion-badge vertical="top" color="success" size="small"></ion-badge>
+              </ion-tab-button>
+            </ion-tab-bar>
+          </div>
+          <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
+            <ion-tab-bar>
+              <ion-tab-button href="" tab="tab-one">
+                <ion-label>Tab One</ion-label>
+                <ion-icon name="star"></ion-icon>
+                <ion-badge size="xxsmall" vertical="bottom" color="danger">9</ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="schedule" class="e2eTabTwoButton">
+                <ion-label>Tab Two</ion-label>
+                <ion-icon name="globe"></ion-icon>
+                <ion-badge size="xxsmall" vertical="bottom" color="primary">
+                  <ion-icon name="star"></ion-icon>
+                </ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-three">
+                <ion-label>Tab Three</ion-label>
+                <ion-icon name="logo-facebook"></ion-icon>
+                <ion-badge size="xxsmall" vertical="bottom" color="warning">999</ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-four" class="e2eTabFourButton">
+                <ion-label>Tab Four</ion-label>
+                <ion-icon name="chatbox"></ion-icon>
+                <ion-badge vertical="bottom" color="success" size="small"></ion-badge>
+              </ion-tab-button>
+            </ion-tab-bar>
+          </div>
+        </ion-list>
+
+        <ion-list id="tab-button-icon-bottom">
+          <ion-list-header>
+            <ion-label> Inside Tab Button - Bottom Icon </ion-label>
+          </ion-list-header>
+
+          <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
+            <ion-tab-bar>
+              <ion-tab-button href="" tab="tab-one" layout="icon-bottom">
+                <ion-label>Tab One</ion-label>
+                <ion-icon name="star"></ion-icon>
+                <ion-badge size="xxsmall" vertical="top" color="danger">9</ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="schedule" class="e2eTabTwoButton" layout="icon-bottom">
+                <ion-label>Tab Two</ion-label>
+                <ion-icon name="globe"></ion-icon>
+                <ion-badge size="xxsmall" vertical="top" color="primary">
+                  <ion-icon name="star"></ion-icon>
+                </ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-three" layout="icon-bottom">
+                <ion-label>Tab Three</ion-label>
+                <ion-icon name="logo-facebook"></ion-icon>
+                <ion-badge size="xxsmall" vertical="top" color="warning">999</ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-four" class="e2eTabFourButton" layout="icon-bottom">
+                <ion-label>Tab Four</ion-label>
+                <ion-icon name="chatbox"></ion-icon>
+                <ion-badge vertical="top" color="success" size="small"></ion-badge>
+              </ion-tab-button>
+            </ion-tab-bar>
+          </div>
+          <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
+            <ion-tab-bar>
+              <ion-tab-button href="" tab="tab-one" layout="icon-bottom">
+                <ion-label>Tab One</ion-label>
+                <ion-icon name="star"></ion-icon>
+                <ion-badge size="xxsmall" vertical="bottom" color="danger">9</ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="schedule" class="e2eTabTwoButton" layout="icon-bottom">
+                <ion-label>Tab Two</ion-label>
+                <ion-icon name="globe"></ion-icon>
+                <ion-badge size="xxsmall" vertical="bottom" color="primary">
+                  <ion-icon name="star"></ion-icon>
+                </ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-three" layout="icon-bottom">
+                <ion-label>Tab Three</ion-label>
+                <ion-icon name="logo-facebook"></ion-icon>
+                <ion-badge size="xxsmall" vertical="bottom" color="warning">999</ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-four" class="e2eTabFourButton" layout="icon-bottom">
+                <ion-label>Tab Four</ion-label>
+                <ion-icon name="chatbox"></ion-icon>
+                <ion-badge vertical="bottom" color="success" size="small"></ion-badge>
+              </ion-tab-button>
+            </ion-tab-bar>
+          </div>
+        </ion-list>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss
index 8f2f3ca748c..aa950208165 100644
--- a/core/src/components/tab-button/tab-button.ionic.scss
+++ b/core/src/components/tab-button/tab-button.ionic.scss
@@ -27,6 +27,8 @@
   @include globals.margin(0);
   @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
   @include globals.text-inherit();
+
+  overflow: visible;
 }
 
 .button-native::after {
@@ -86,3 +88,47 @@
 :host(.tab-button-shape-rectangular) {
   @include globals.border-radius(globals.$ion-border-radius-0);
 }
+
+// Tab Button: Badge
+// --------------------------------------------------
+
+:host ::slotted(ion-badge) {
+  @include globals.position(null, null, null, calc(50% + globals.$ion-scale-300));
+}
+
+:host ::slotted(ion-badge.badge-vertical-top) {
+  @include globals.position(-2px);
+}
+
+:host ::slotted(ion-badge.badge-vertical-top:empty) {
+  @include globals.position(calc(globals.$ion-scale-100 * -1));
+}
+
+:host ::slotted(ion-badge.badge-vertical-bottom) {
+  @include globals.position(calc(50% - globals.$ion-scale-200));
+}
+
+:host ::slotted(ion-badge.badge-vertical-bottom:empty) {
+  @include globals.position(calc(50% - globals.$ion-scale-100));
+}
+
+:host ::slotted(ion-badge[vertical]:not(:empty)) {
+  @include globals.padding(globals.$ion-scale-100);
+
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+}
+
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-top) {
+  @include globals.position(calc(50% - globals.$ion-scale-100));
+}
+
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom) {
+  @include globals.position(calc(50% + globals.$ion-scale-100));
+}
+
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty) {
+  @include globals.position(calc(50% + 14px));
+}
diff --git a/core/src/components/tab-button/tab-button.ios.scss b/core/src/components/tab-button/tab-button.ios.scss
index a63e2de4c7c..fa54a745d31 100644
--- a/core/src/components/tab-button/tab-button.ios.scss
+++ b/core/src/components/tab-button/tab-button.ios.scss
@@ -15,7 +15,7 @@
 // iOS Tab Button: Badge
 // --------------------------------------------------
 
-::slotted(ion-badge) {
+::slotted(ion-badge:not([vertical])) {
   @include padding(1px, 6px);
   @include position(4px, null, null, calc(50% + 6px));
 
@@ -26,6 +26,64 @@
   line-height: 16px;
 }
 
+:host ::slotted(ion-badge:empty) {
+  @include padding(0, 0);
+
+  width: $tab-ios-button-badge-size-emtpy;
+  height: $tab-ios-button-badge-size-emtpy;
+}
+
+:host ::slotted(ion-badge[vertical]) {
+  @include position(null, null, null, $tab-ios-button-badge-start-position);
+}
+
+:host ::slotted(ion-badge.badge-vertical-top) {
+  @include position($tab-ios-button-badge-top-position);
+}
+
+:host ::slotted(ion-badge.badge-vertical-top:empty) {
+  @include position($tab-ios-button-badge-top-position-empty);
+}
+
+:host ::slotted(ion-badge.badge-vertical-bottom) {
+  @include position($tab-ios-button-badge-bottom-position);
+}
+
+:host ::slotted(ion-badge.badge-vertical-bottom:empty) {
+  @include position($tab-ios-button-badge-bottom-position-empty);
+}
+
+:host ::slotted(ion-badge[vertical]:not(:empty)) {
+  @include padding(
+    $tab-ios-button-badge-padding-top,
+    $tab-ios-button-badge-padding-end,
+    $tab-ios-button-badge-padding-bottom,
+    $tab-ios-button-badge-padding-start
+  );
+
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+
+  min-width: $tab-ios-button-badge-size;
+  height: $tab-ios-button-badge-size;
+
+  font-size: $tab-ios-button-badge-font-size;
+}
+
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-top) {
+  @include position($tab-ios-button-icon-bottom-badge-top-position);
+}
+
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom) {
+  @include position($tab-ios-button-icon-bottom-badge-bottom-position);
+}
+
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty) {
+  @include position($tab-ios-button-icon-bottom-badge-bottom-position-empty);
+}
+
 // iOS Tab Button: Icon
 // --------------------------------------------------
 
@@ -102,7 +160,7 @@
 
 // Label
 :host(.tab-layout-icon-bottom) ::slotted(ion-label) {
-  @include margin(4px, null, null, null);
+  @include margin(4px);
 }
 
 // iOS Tab Button: Icon Start / End Layout
@@ -128,7 +186,7 @@
 // Badge
 :host(.tab-layout-label-hide) ::slotted(ion-badge),
 :host(.tab-has-icon-only) ::slotted(ion-badge) {
-  @include position(10px, null, null, null);
+  @include position(10px);
 }
 
 // Icon
diff --git a/core/src/components/tab-button/tab-button.ios.vars.scss b/core/src/components/tab-button/tab-button.ios.vars.scss
index 4221c8fff79..07216846ad1 100644
--- a/core/src/components/tab-button/tab-button.ios.vars.scss
+++ b/core/src/components/tab-button/tab-button.ios.vars.scss
@@ -29,3 +29,51 @@ $tab-button-ios-icon-size: 24px;
 
 /// @prop - Size of the tab button icon when there is not a label
 $tab-button-ios-icon-only-size: 30px;
+
+// Tab Button: Badge
+// --------------------------------------------------
+
+/// @prop - Badge size
+$tab-ios-button-badge-size: 16px;
+
+/// @prop - Badge size when empty
+$tab-ios-button-badge-size-emtpy: 8px;
+
+/// @prop - Badge top position
+$tab-ios-button-badge-top-position: 2px;
+
+/// @prop - Badge top position when empty
+$tab-ios-button-badge-top-position-empty: 4px;
+
+/// @prop - Badge bottom position
+$tab-ios-button-badge-bottom-position: calc(50% - 8px);
+
+/// @prop - Badge bottom position when empty
+$tab-ios-button-badge-bottom-position-empty: calc(50% - 2px);
+
+/// @prop - Badge left position
+$tab-ios-button-badge-start-position: calc(50% + 12px);
+
+/// @prop - Badge padding top
+$tab-ios-button-badge-padding-top: 4px;
+
+/// @prop - Badge padding end
+$tab-ios-button-badge-padding-end: 4px;
+
+/// @prop - Badge padding bottom
+$tab-ios-button-badge-padding-bottom: 4px;
+
+/// @prop - Badge padding start
+$tab-ios-button-badge-padding-start: 4px;
+
+/// @prop - Badge font size
+$tab-ios-button-badge-font-size: 12px;
+
+/// @prop - Badge bottom position when tab bottom has icon at Bottom
+$tab-ios-button-icon-bottom-badge-top-position: calc(50% - 4px);
+
+/// @prop - Badge bottom position when tab bottom has icon at bottom
+$tab-ios-button-icon-bottom-badge-bottom-position: calc(50% + 4px);
+
+/// @prop - Badge bottom position when empty and when tab bottom has icon at bottom
+$tab-ios-button-icon-bottom-badge-bottom-position-empty: calc(50% + 14px);
diff --git a/core/src/components/tab-button/tab-button.md.scss b/core/src/components/tab-button/tab-button.md.scss
index cf6633141c3..ae0ca36bd5b 100644
--- a/core/src/components/tab-button/tab-button.md.scss
+++ b/core/src/components/tab-button/tab-button.md.scss
@@ -75,6 +75,26 @@
   height: $tab-button-md-badge-size-empty;
 }
 
+:host ::slotted(ion-badge[vertical="bottom"]) {
+  @include position($tab-button-md-badge-bottom-position);
+}
+
+:host ::slotted(ion-badge[vertical="bottom"]:empty) {
+  @include position($tab-button-md-badge-bottom-position-empty);
+}
+
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical="top"]) {
+  @include position($tab-md-button-icon-bottom-badge-top-position, null, null, calc(50% + 6px));
+}
+
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical="bottom"]) {
+  @include position($tab-md-button-icon-bottom-badge-bottom-position, null, null, calc(50% + 6px));
+}
+
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical="bottom"]:empty) {
+  @include position($tab-md-button-icon-bottom-badge-bottom-position-empty, null, null, calc(50% + 6px));
+}
+
 // Material Design Tab Button: Icon Top Layout
 // --------------------------------------------------------------
 
@@ -146,7 +166,7 @@
 // Badge
 :host(.tab-layout-label-hide) ::slotted(ion-badge),
 :host(.tab-has-icon-only) ::slotted(ion-badge) {
-  @include position(16px, null, null, null);
+  @include position(16px);
 }
 
 // Icon
diff --git a/core/src/components/tab-button/tab-button.md.vars.scss b/core/src/components/tab-button/tab-button.md.vars.scss
index 9416ba10d30..e9a5d9c1243 100644
--- a/core/src/components/tab-button/tab-button.md.vars.scss
+++ b/core/src/components/tab-button/tab-button.md.vars.scss
@@ -80,3 +80,18 @@ $tab-button-md-badge-font-size: 8px;
 
 /// @prop - Size of the empty tab button badge
 $tab-button-md-badge-size-empty: 8px;
+
+/// @prop - Badge bottom position
+$tab-button-md-badge-bottom-position: calc(50% - 8px);
+
+/// @prop - Badge bottom position when empty
+$tab-button-md-badge-bottom-position-empty: calc(50% - 4px);
+
+/// @prop - Badge bottom position when tab bottom has icon at Bottom
+$tab-md-button-icon-bottom-badge-top-position: calc(50% - 4px);
+
+/// @prop - Badge bottom position when tab bottom has icon at bottom
+$tab-md-button-icon-bottom-badge-bottom-position: calc(50% + 4px);
+
+/// @prop - Badge bottom position when empty and when tab bottom has icon at bottom
+$tab-md-button-icon-bottom-badge-bottom-position-empty: calc(50% + 12px);
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png
index 24a788e4905..e6d58d5f522 100644
Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Firefox-linux.png
index 51b53cbb33f..d933dfce325 100644
Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Safari-linux.png
index 34ca4c0a6fb..181d5c45ba9 100644
Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Chrome-linux.png
index 0248c9cc235..fdf305f4e72 100644
Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Firefox-linux.png
index 0bc76a61521..2a3c8fd9304 100644
Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Safari-linux.png
index 94857543581..dafd82b194f 100644
Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Chrome-linux.png
index 5e1f96f555b..8c50f06fd14 100644
Binary files a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Firefox-linux.png
index 12e707a3666..8d7cea9e8a6 100644
Binary files a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Safari-linux.png
index 5e9918e27f0..d887798c299 100644
Binary files a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Chrome-linux.png
index df4aa74ab54..ba7d0c82b94 100644
Binary files a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Firefox-linux.png
index 4489c6b462c..cb47e94d1d3 100644
Binary files a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Safari-linux.png
index 842032dfe25..59147ad9db4 100644
Binary files a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Safari-linux.png differ