From 6961aa0a8e6b7d090de12985c88e3ebbb400f0c8 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Mon, 17 Mar 2025 16:41:04 -0700
Subject: [PATCH 1/7] docs(badge, tab-bar): add playground to show usage of
 badges in tab-bar

---
 docs/api/badge.md                             | 12 ++++++
 docs/api/tab-bar.md                           | 12 ++++++
 .../angular/example_component_html.md         | 14 +++++++
 .../angular/example_component_ts.md           | 23 +++++++++++
 .../usage/v8/badge/inside-tab-bar/demo.html   | 39 +++++++++++++++++++
 static/usage/v8/badge/inside-tab-bar/index.md | 24 ++++++++++++
 .../v8/badge/inside-tab-bar/javascript.md     | 14 +++++++
 static/usage/v8/badge/inside-tab-bar/react.md | 24 ++++++++++++
 static/usage/v8/badge/inside-tab-bar/vue.md   | 35 +++++++++++++++++
 9 files changed, 197 insertions(+)
 create mode 100644 static/usage/v8/badge/inside-tab-bar/angular/example_component_html.md
 create mode 100644 static/usage/v8/badge/inside-tab-bar/angular/example_component_ts.md
 create mode 100644 static/usage/v8/badge/inside-tab-bar/demo.html
 create mode 100644 static/usage/v8/badge/inside-tab-bar/index.md
 create mode 100644 static/usage/v8/badge/inside-tab-bar/javascript.md
 create mode 100644 static/usage/v8/badge/inside-tab-bar/react.md
 create mode 100644 static/usage/v8/badge/inside-tab-bar/vue.md

diff --git a/docs/api/badge.md b/docs/api/badge.md
index c5ff3d188e5..97864f6292a 100644
--- a/docs/api/badge.md
+++ b/docs/api/badge.md
@@ -25,6 +25,18 @@ import Basic from '@site/static/usage/v8/badge/basic/index.md';
 
 <Basic />
 
+## Inside Tab Bar
+
+Badges can be added to a tab button, commonly used to indicate notifications or additional items linked to the element.
+
+:::info
+Empty badges are only available for `md` mode.
+:::
+
+import InsideTabBar from '@site/static/usage/v8/badge/inside-tab-bar/index.md';
+
+<InsideTabBar />
+
 ## Theming
 
 ### Colors
diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.md
index bb67296f61f..a9de312152b 100644
--- a/docs/api/tab-bar.md
+++ b/docs/api/tab-bar.md
@@ -148,6 +148,18 @@ export default defineComponent({
 
 </Tabs>
 
+## With Badges
+
+Badges can be added to a tab button, commonly used to indicate notifications or additional items linked to the element.
+
+:::info
+Empty badges are only available for `md` mode.
+:::
+
+import InsideTabBar from '@site/static/usage/v8/badge/inside-tab-bar/index.md';
+
+<InsideTabBar />
+
 ## Properties
 <Props />
 
diff --git a/static/usage/v8/badge/inside-tab-bar/angular/example_component_html.md b/static/usage/v8/badge/inside-tab-bar/angular/example_component_html.md
new file mode 100644
index 00000000000..731d11da89f
--- /dev/null
+++ b/static/usage/v8/badge/inside-tab-bar/angular/example_component_html.md
@@ -0,0 +1,14 @@
+```html
+<ion-tab-bar color="light">
+  <ion-tab-button tab="1">
+    <ion-icon name="heart"></ion-icon>
+    <ion-label>Favorites</ion-label>
+    <ion-badge color="danger"></ion-badge>
+  </ion-tab-button>
+
+  <ion-tab-button tab="2">
+    <ion-icon name="calendar"></ion-icon>
+    <ion-badge color="danger">47</ion-badge>
+  </ion-tab-button>
+</ion-tab-bar>
+```
diff --git a/static/usage/v8/badge/inside-tab-bar/angular/example_component_ts.md b/static/usage/v8/badge/inside-tab-bar/angular/example_component_ts.md
new file mode 100644
index 00000000000..31e302e5530
--- /dev/null
+++ b/static/usage/v8/badge/inside-tab-bar/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBadge, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { heart, calendar } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['./example.component.css'],
+  imports: [IonBadge, IonTabBar, IonTabButton, IonIcon, IonLabel],
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ heart, calendar });
+  }
+}
+```
diff --git a/static/usage/v8/badge/inside-tab-bar/demo.html b/static/usage/v8/badge/inside-tab-bar/demo.html
new file mode 100644
index 00000000000..ea88d03a970
--- /dev/null
+++ b/static/usage/v8/badge/inside-tab-bar/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Badge</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+
+    <style>
+      ion-tab-bar {
+        flex: 1;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-tab-bar color="light">
+            <ion-tab-button tab="1">
+              <ion-icon name="heart"></ion-icon>
+              <ion-label>Favorites</ion-label>
+              <ion-badge color="danger"></ion-badge>
+            </ion-tab-button>
+
+            <ion-tab-button tab="2">
+              <ion-icon name="calendar"></ion-icon>
+              <ion-badge color="danger">47</ion-badge>
+            </ion-tab-button>
+          </ion-tab-bar>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v8/badge/inside-tab-bar/index.md b/static/usage/v8/badge/inside-tab-bar/index.md
new file mode 100644
index 00000000000..66e65779a9c
--- /dev/null
+++ b/static/usage/v8/badge/inside-tab-bar/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/badge/inside-tab-bar/demo.html"
+/>
diff --git a/static/usage/v8/badge/inside-tab-bar/javascript.md b/static/usage/v8/badge/inside-tab-bar/javascript.md
new file mode 100644
index 00000000000..731d11da89f
--- /dev/null
+++ b/static/usage/v8/badge/inside-tab-bar/javascript.md
@@ -0,0 +1,14 @@
+```html
+<ion-tab-bar color="light">
+  <ion-tab-button tab="1">
+    <ion-icon name="heart"></ion-icon>
+    <ion-label>Favorites</ion-label>
+    <ion-badge color="danger"></ion-badge>
+  </ion-tab-button>
+
+  <ion-tab-button tab="2">
+    <ion-icon name="calendar"></ion-icon>
+    <ion-badge color="danger">47</ion-badge>
+  </ion-tab-button>
+</ion-tab-bar>
+```
diff --git a/static/usage/v8/badge/inside-tab-bar/react.md b/static/usage/v8/badge/inside-tab-bar/react.md
new file mode 100644
index 00000000000..00f9bd1718b
--- /dev/null
+++ b/static/usage/v8/badge/inside-tab-bar/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonBadge, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
+import { heart, calendar } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonTabBar color="light">
+        <IonTabButton tab="tab1">
+          <IonIcon icon={heart} />
+          <IonLabel>Favorites</IonLabel>
+          <IonBadge color="danger"></IonBadge>
+        </IonTabButton>
+        <IonTabButton tab="tab2">
+          <IonIcon icon={calendar} />
+          <IonBadge color="danger">47</IonBadge>
+        </IonTabButton>
+      </IonTabBar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v8/badge/inside-tab-bar/vue.md b/static/usage/v8/badge/inside-tab-bar/vue.md
new file mode 100644
index 00000000000..8de82f32180
--- /dev/null
+++ b/static/usage/v8/badge/inside-tab-bar/vue.md
@@ -0,0 +1,35 @@
+```html
+<template>
+  <ion-tab-bar color="light">
+    <ion-tab-button tab="1">
+      <ion-icon :icon="heart" />
+      <ion-label>Favorites</ion-label>
+      <ion-badge color="danger"></ion-badge>
+    </ion-tab-button>
+
+    <ion-tab-button tab="2">
+      <ion-icon :icon="calendar" />
+      <ion-badge color="danger">47</ion-badge>
+    </ion-tab-button>
+  </ion-tab-bar>
+</template>
+
+<script lang="ts">
+  import { IonBadge, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/vue';
+  import { heart, calendar } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonBadge,
+      IonTabBar,
+      IonTabButton,
+      IonIcon,
+      IonLabel,
+    },
+    setup() {
+      return { heart, calendar };
+    },
+  });
+</script>
+```

From e40fbf2215e6f5ff7a8b92988dbe07cfaf8f3c01 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 18 Mar 2025 11:34:26 -0700
Subject: [PATCH 2/7] Update docs/api/tab-bar.md

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
---
 docs/api/tab-bar.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.md
index a9de312152b..61fbcf4bfac 100644
--- a/docs/api/tab-bar.md
+++ b/docs/api/tab-bar.md
@@ -148,7 +148,7 @@ export default defineComponent({
 
 </Tabs>
 
-## With Badges
+## Badges in Tab Buttons
 
 Badges can be added to a tab button, commonly used to indicate notifications or additional items linked to the element.
 

From 83580a4f573d0e6e8893aea76b5c2d750c8b6713 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 18 Mar 2025 11:34:49 -0700
Subject: [PATCH 3/7] Update docs/api/badge.md

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
---
 docs/api/badge.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/badge.md b/docs/api/badge.md
index 97864f6292a..7dd57c7be05 100644
--- a/docs/api/badge.md
+++ b/docs/api/badge.md
@@ -27,7 +27,7 @@ import Basic from '@site/static/usage/v8/badge/basic/index.md';
 
 ## Inside Tab Bar
 
-Badges can be added to a tab button, commonly used to indicate notifications or additional items linked to the element.
+Badges can be added inside a tab button, often used to indicate notifications or highlight additional items associated with the element.
 
 :::info
 Empty badges are only available for `md` mode.

From 5ad9d132b07228c27db4c59fe1b36c5808269048 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 18 Mar 2025 11:35:03 -0700
Subject: [PATCH 4/7] Update docs/api/badge.md

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
---
 docs/api/badge.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/badge.md b/docs/api/badge.md
index 7dd57c7be05..6a4e6671919 100644
--- a/docs/api/badge.md
+++ b/docs/api/badge.md
@@ -25,7 +25,7 @@ import Basic from '@site/static/usage/v8/badge/basic/index.md';
 
 <Basic />
 
-## Inside Tab Bar
+## Badges in Tab Buttons
 
 Badges can be added inside a tab button, often used to indicate notifications or highlight additional items associated with the element.
 

From b6cda1908aebcb95ce7decad5b9239da4c0b36bc Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 18 Mar 2025 11:35:11 -0700
Subject: [PATCH 5/7] Update docs/api/tab-bar.md

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
---
 docs/api/tab-bar.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.md
index 61fbcf4bfac..f3f18c8cd39 100644
--- a/docs/api/tab-bar.md
+++ b/docs/api/tab-bar.md
@@ -150,7 +150,7 @@ export default defineComponent({
 
 ## Badges in Tab Buttons
 
-Badges can be added to a tab button, commonly used to indicate notifications or additional items linked to the element.
+Badges can be added inside a tab button, often used to indicate notifications or highlight additional items associated with the element.
 
 :::info
 Empty badges are only available for `md` mode.

From d911ff3a7d1af4ccf2fd2808f984ff73d304e132 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 18 Mar 2025 13:47:49 -0700
Subject: [PATCH 6/7] docs(bagdge): add plain tab button

---
 .../inside-tab-bar/angular/example_component_html.md      | 4 ++++
 .../badge/inside-tab-bar/angular/example_component_ts.md  | 4 ++--
 static/usage/v8/badge/inside-tab-bar/demo.html            | 4 ++++
 static/usage/v8/badge/inside-tab-bar/javascript.md        | 4 ++++
 static/usage/v8/badge/inside-tab-bar/react.md             | 5 ++++-
 static/usage/v8/badge/inside-tab-bar/vue.md               | 8 ++++++--
 6 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/static/usage/v8/badge/inside-tab-bar/angular/example_component_html.md b/static/usage/v8/badge/inside-tab-bar/angular/example_component_html.md
index 731d11da89f..c3ab1dd5e19 100644
--- a/static/usage/v8/badge/inside-tab-bar/angular/example_component_html.md
+++ b/static/usage/v8/badge/inside-tab-bar/angular/example_component_html.md
@@ -7,6 +7,10 @@
   </ion-tab-button>
 
   <ion-tab-button tab="2">
+    <ion-icon name="musical-note"></ion-icon>
+  </ion-tab-button>
+
+  <ion-tab-button tab="3">
     <ion-icon name="calendar"></ion-icon>
     <ion-badge color="danger">47</ion-badge>
   </ion-tab-button>
diff --git a/static/usage/v8/badge/inside-tab-bar/angular/example_component_ts.md b/static/usage/v8/badge/inside-tab-bar/angular/example_component_ts.md
index 31e302e5530..9454e1984a0 100644
--- a/static/usage/v8/badge/inside-tab-bar/angular/example_component_ts.md
+++ b/static/usage/v8/badge/inside-tab-bar/angular/example_component_ts.md
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 import { IonBadge, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { heart, calendar } from 'ionicons/icons';
+import { heart, calendar, musicalNote } from 'ionicons/icons';
 
 @Component({
   selector: 'app-example',
@@ -17,7 +17,7 @@ export class ExampleComponent {
      * can be registered in app.component.ts and then
      * referenced by name anywhere in your application.
      */
-    addIcons({ heart, calendar });
+    addIcons({ heart, calendar, musicalNote });
   }
 }
 ```
diff --git a/static/usage/v8/badge/inside-tab-bar/demo.html b/static/usage/v8/badge/inside-tab-bar/demo.html
index ea88d03a970..ad89972abb3 100644
--- a/static/usage/v8/badge/inside-tab-bar/demo.html
+++ b/static/usage/v8/badge/inside-tab-bar/demo.html
@@ -28,6 +28,10 @@
             </ion-tab-button>
 
             <ion-tab-button tab="2">
+              <ion-icon name="musical-note"></ion-icon>
+            </ion-tab-button>
+
+            <ion-tab-button tab="3">
               <ion-icon name="calendar"></ion-icon>
               <ion-badge color="danger">47</ion-badge>
             </ion-tab-button>
diff --git a/static/usage/v8/badge/inside-tab-bar/javascript.md b/static/usage/v8/badge/inside-tab-bar/javascript.md
index 731d11da89f..c3ab1dd5e19 100644
--- a/static/usage/v8/badge/inside-tab-bar/javascript.md
+++ b/static/usage/v8/badge/inside-tab-bar/javascript.md
@@ -7,6 +7,10 @@
   </ion-tab-button>
 
   <ion-tab-button tab="2">
+    <ion-icon name="musical-note"></ion-icon>
+  </ion-tab-button>
+
+  <ion-tab-button tab="3">
     <ion-icon name="calendar"></ion-icon>
     <ion-badge color="danger">47</ion-badge>
   </ion-tab-button>
diff --git a/static/usage/v8/badge/inside-tab-bar/react.md b/static/usage/v8/badge/inside-tab-bar/react.md
index 00f9bd1718b..8aab724524e 100644
--- a/static/usage/v8/badge/inside-tab-bar/react.md
+++ b/static/usage/v8/badge/inside-tab-bar/react.md
@@ -1,7 +1,7 @@
 ```tsx
 import React from 'react';
 import { IonBadge, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
-import { heart, calendar } from 'ionicons/icons';
+import { heart, calendar, musicalNote } from 'ionicons/icons';
 
 function Example() {
   return (
@@ -13,6 +13,9 @@ function Example() {
           <IonBadge color="danger"></IonBadge>
         </IonTabButton>
         <IonTabButton tab="tab2">
+          <IonIcon icon={musicalNote} />
+        </IonTabButton>
+        <IonTabButton tab="tab3">
           <IonIcon icon={calendar} />
           <IonBadge color="danger">47</IonBadge>
         </IonTabButton>
diff --git a/static/usage/v8/badge/inside-tab-bar/vue.md b/static/usage/v8/badge/inside-tab-bar/vue.md
index 8de82f32180..7466b5966be 100644
--- a/static/usage/v8/badge/inside-tab-bar/vue.md
+++ b/static/usage/v8/badge/inside-tab-bar/vue.md
@@ -8,6 +8,10 @@
     </ion-tab-button>
 
     <ion-tab-button tab="2">
+      <ion-icon :icon="musicalNote" />
+    </ion-tab-button>
+
+    <ion-tab-button tab="3">
       <ion-icon :icon="calendar" />
       <ion-badge color="danger">47</ion-badge>
     </ion-tab-button>
@@ -16,7 +20,7 @@
 
 <script lang="ts">
   import { IonBadge, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/vue';
-  import { heart, calendar } from 'ionicons/icons';
+  import { heart, calendar, musicalNote } from 'ionicons/icons';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
@@ -28,7 +32,7 @@
       IonLabel,
     },
     setup() {
-      return { heart, calendar };
+      return { heart, calendar, musicalNote };
     },
   });
 </script>

From 445d70ddfa7d66d4a8744d0b9725578a5e25b191 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 18 Mar 2025 14:38:25 -0700
Subject: [PATCH 7/7] docs(badge): add label for consistency

---
 .../v8/badge/inside-tab-bar/angular/example_component_html.md   | 2 ++
 static/usage/v8/badge/inside-tab-bar/demo.html                  | 2 ++
 static/usage/v8/badge/inside-tab-bar/javascript.md              | 2 ++
 static/usage/v8/badge/inside-tab-bar/react.md                   | 2 ++
 static/usage/v8/badge/inside-tab-bar/vue.md                     | 2 ++
 5 files changed, 10 insertions(+)

diff --git a/static/usage/v8/badge/inside-tab-bar/angular/example_component_html.md b/static/usage/v8/badge/inside-tab-bar/angular/example_component_html.md
index c3ab1dd5e19..e300331495d 100644
--- a/static/usage/v8/badge/inside-tab-bar/angular/example_component_html.md
+++ b/static/usage/v8/badge/inside-tab-bar/angular/example_component_html.md
@@ -8,10 +8,12 @@
 
   <ion-tab-button tab="2">
     <ion-icon name="musical-note"></ion-icon>
+    <ion-label>Music</ion-label>
   </ion-tab-button>
 
   <ion-tab-button tab="3">
     <ion-icon name="calendar"></ion-icon>
+    <ion-label>Calendar</ion-label>
     <ion-badge color="danger">47</ion-badge>
   </ion-tab-button>
 </ion-tab-bar>
diff --git a/static/usage/v8/badge/inside-tab-bar/demo.html b/static/usage/v8/badge/inside-tab-bar/demo.html
index ad89972abb3..dbd8f6c7060 100644
--- a/static/usage/v8/badge/inside-tab-bar/demo.html
+++ b/static/usage/v8/badge/inside-tab-bar/demo.html
@@ -29,10 +29,12 @@
 
             <ion-tab-button tab="2">
               <ion-icon name="musical-note"></ion-icon>
+              <ion-label>Music</ion-label>
             </ion-tab-button>
 
             <ion-tab-button tab="3">
               <ion-icon name="calendar"></ion-icon>
+              <ion-label>Calendar</ion-label>
               <ion-badge color="danger">47</ion-badge>
             </ion-tab-button>
           </ion-tab-bar>
diff --git a/static/usage/v8/badge/inside-tab-bar/javascript.md b/static/usage/v8/badge/inside-tab-bar/javascript.md
index c3ab1dd5e19..e300331495d 100644
--- a/static/usage/v8/badge/inside-tab-bar/javascript.md
+++ b/static/usage/v8/badge/inside-tab-bar/javascript.md
@@ -8,10 +8,12 @@
 
   <ion-tab-button tab="2">
     <ion-icon name="musical-note"></ion-icon>
+    <ion-label>Music</ion-label>
   </ion-tab-button>
 
   <ion-tab-button tab="3">
     <ion-icon name="calendar"></ion-icon>
+    <ion-label>Calendar</ion-label>
     <ion-badge color="danger">47</ion-badge>
   </ion-tab-button>
 </ion-tab-bar>
diff --git a/static/usage/v8/badge/inside-tab-bar/react.md b/static/usage/v8/badge/inside-tab-bar/react.md
index 8aab724524e..7ba592426fb 100644
--- a/static/usage/v8/badge/inside-tab-bar/react.md
+++ b/static/usage/v8/badge/inside-tab-bar/react.md
@@ -14,9 +14,11 @@ function Example() {
         </IonTabButton>
         <IonTabButton tab="tab2">
           <IonIcon icon={musicalNote} />
+          <IonLabel>Music</IonLabel>
         </IonTabButton>
         <IonTabButton tab="tab3">
           <IonIcon icon={calendar} />
+          <IonLabel>Calendar</IonLabel>
           <IonBadge color="danger">47</IonBadge>
         </IonTabButton>
       </IonTabBar>
diff --git a/static/usage/v8/badge/inside-tab-bar/vue.md b/static/usage/v8/badge/inside-tab-bar/vue.md
index 7466b5966be..3534095941b 100644
--- a/static/usage/v8/badge/inside-tab-bar/vue.md
+++ b/static/usage/v8/badge/inside-tab-bar/vue.md
@@ -9,10 +9,12 @@
 
     <ion-tab-button tab="2">
       <ion-icon :icon="musicalNote" />
+      <ion-label>Music</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="3">
       <ion-icon :icon="calendar" />
+      <ion-label>Calendar</ion-label>
       <ion-badge color="danger">47</ion-badge>
     </ion-tab-button>
   </ion-tab-bar>