ionic-team · OS-pedrolourenco · Mar 31, 2025 · Mar 13, 2025 · Mar 13, 2025 · Mar 13, 2025
@@ -198,3 +198,32 @@
 
   transform: translate(-50%, -50%);
 }
+
+// Badge in Button
+// --------------------------------------------------
+
+:host([vertical]:not(.in-tab-button).in-button.badge-xxsmall),
+:host([vertical]:not(.in-tab-button).in-button.badge-xsmall),
+:host([vertical]:not(.in-tab-button).in-button.badge-small) {
+  @include globals.position(null, calc(-1 * var(globals.$ion-space-050)));
+}
+
+:host([vertical]:not(.in-tab-button).in-button.badge-medium),
+:host([vertical]:not(.in-tab-button).in-button.badge-large),
+:host([vertical]:not(.in-tab-button).in-button.badge-xlarge) {
+  @include globals.position(null, globals.$ion-space-050);
+}
+
+:host(:not(:empty).in-button) {
+  min-width: globals.$ion-scale-400;
+  height: globals.$ion-scale-400;
+
+  font-size: globals.$ion-font-size-300;
+
+  line-height: globals.$ion-font-line-height-500;
+
+  ::slotted(ion-icon) {
+    width: globals.$ion-scale-300;
+    height: globals.$ion-scale-300;
+  }
+}
@@ -13,7 +13,7 @@
 }
 
 // TODO(ROU-10747): Review size styles when sizes are defined for native themes.
-:host([vertical]:not(.in-tab-button)),
+:host([vertical]:not(.in-button):not(.in-tab-button)),
 :host(:empty) {
   --padding-start: 0;
   --padding-end: 0;
@@ -29,3 +29,20 @@
 
   line-height: 10px;
 }
+
+// Badge in Button
+// --------------------------------------------------
+
+:host(:not(:empty).in-button) {
+  min-width: $badge-size-in-button;
+  height: $badge-size-in-button;
+
+  font-size: $badge-font-size-in-button;
+
+  line-height: $badge-line-height-in-button;
+
+  ::slotted(ion-icon) {
+    width: $badge-icon-size-in-button;
+    height: $badge-icon-size-in-button;
+  }
+}
@@ -1,4 +1,5 @@
 @import "../../themes/functions.font";
+@import "../../themes/functions.sizes";
 
 // Badge
 // --------------------------------------------------
@@ -8,3 +9,15 @@ $badge-hint-baseline-font-size: 8px;
 
 /// @prop - Font size of the badge hint
 $badge-hint-font-size: dynamic-font($badge-hint-baseline-font-size);
+
+/// @prop - Size of the badge when inside button
+$badge-size-in-button: 16px;
+
+/// @prop - Font size of the badge when inside button
+$badge-font-size-in-button: px-to-rem(12);
+
+/// @prop - Line height of the badge when inside button
+$badge-line-height-in-button: 20px;
+
+/// @prop - Size of of the badge icon when inside button
+$badge-icon-size-in-button: 12px;
@@ -99,6 +99,7 @@ export class Badge implements ComponentInterface {
           [`badge-${shape}`]: shape !== undefined,
           [`badge-${size}`]: size !== undefined,
           [`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
+          'in-button': hostContext('ion-button', this.el),
           'in-tab-button': hostContext('ion-tab-button', this.el),
         })}
       >

@@ -39,4 +39,22 @@ configs({ directions: ['ltr'], modes: ['md', 'ios', 'ionic-md'] }).forEach(({ co
       await expect(container).toHaveScreenshot(screenshot(`badge-hint-tab-button-icon-bottom`));
     });
   });
+
+  test.describe(title('badge: hint inside 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('#button-top');
+
+      await expect(container).toHaveScreenshot(screenshot(`badge-hint-button-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('#button-bottom');
+
+      await expect(container).toHaveScreenshot(screenshot(`badge-hint-button-bottom`));
+    });
+  });
 });
@@ -365,6 +365,58 @@
             </ion-tab-bar>
           </div>
         </ion-list>
+
+        <ion-list id="button-top">
+          <ion-list-header>
+            <ion-label> Inside Button - Top Placement </ion-label>
+          </ion-list-header>
+          <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
+            <ion-button fill="clear">
+              <ion-icon slot="icon-only" name="add"></ion-icon>
+              <ion-badge color="danger" size="small" vertical="top"></ion-badge>
+            </ion-button>
+            <ion-button fill="clear">
+              <ion-icon slot="icon-only" name="add"></ion-icon>
+              <ion-badge color="danger" size="small" vertical="top">1</ion-badge>
+            </ion-button>
+            <ion-button fill="clear">
+              <ion-icon slot="icon-only" name="add"></ion-icon>
+              <ion-badge color="danger" size="small" vertical="top">99+</ion-badge>
+            </ion-button>
+            <ion-button fill="clear">
+              <ion-icon slot="icon-only" name="add"></ion-icon>
+              <ion-badge color="danger" size="small" vertical="top">
+                <ion-icon name="star"></ion-icon>
+              </ion-badge>
+            </ion-button>
+          </div>
+        </ion-list>
+
+        <ion-list id="button-bottom">
+          <ion-list-header>
+            <ion-label> Inside Button - Bottom Placement </ion-label>
+          </ion-list-header>
+          <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
+            <ion-button fill="clear">
+              <ion-icon slot="icon-only" name="add"></ion-icon>
+              <ion-badge color="danger" size="small" vertical="bottom"></ion-badge>
+            </ion-button>
+            <ion-button fill="clear">
+              <ion-icon slot="icon-only" name="add"></ion-icon>
+              <ion-badge color="danger" size="small" vertical="bottom">1</ion-badge>
+            </ion-button>
+            <ion-button fill="clear">
+              <ion-icon slot="icon-only" name="add"></ion-icon>
+              <ion-badge color="danger" size="small" vertical="bottom">99+</ion-badge>
+            </ion-button>
+            <ion-button fill="clear">
+              <ion-icon slot="icon-only" name="add"></ion-icon>
+              <ion-badge color="danger" size="small" vertical="bottom">
+                <ion-icon name="star"></ion-icon>
+              </ion-badge>
+            </ion-button>
+          </div>
+        </ion-list>
       </ion-content>
     </ion-app>
   </body>

@@ -1,3 +1,4 @@
+@import "../../themes/mixins";
 @import "./button.vars";
 
 // Button
@@ -306,3 +307,30 @@ ion-ripple-effect {
   background: #{var(--ion-toolbar-color, var(--background))};
   color: #{var(--ion-toolbar-background, var(--color))};
 }
+
+// Button Badge
+// --------------------------------------------------
+
+.button-native ion-ripple-effect,
+.button-native::after {
+  @include border-radius(inherit);
+}
+
+// This rule works for Chrome.
+:has(ion-badge) .button-native {
+  --overflow: visible;
+}
+
+// This rule works for the rest of the browsers.
+:host(:has(ion-badge)) .button-native {
-// This rule works for Chrome.
-:has(ion-badge) .button-native {
-  --overflow: visible;
-}
-
-// This rule works for the rest of the browsers.
-:host(:has(ion-badge)) .button-native {
+// This rule works for Chrome.
+:has(ion-badge) .button-native,
+// This rule works for the rest of the browsers.
+:host(:has(ion-badge)) .button-native {
-// This rule works for Chrome.
-:has(ion-badge) .button-native {
-  --overflow: visible;
-}
-
-// This rule works for the rest of the browsers.
-:host(:has(ion-badge)) .button-native {
+// This rule works for Chrome.
+:has(ion-badge) .button-native,
+// This rule works for the rest of the browsers.
+:host(:has(ion-badge)) .button-native {
+  --overflow: visible;
+}
+
+:host ::slotted(ion-badge[vertical]:not(:empty)) {
+  @include padding($button-badge-padding);
+
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+}
@@ -22,3 +22,10 @@
 ::slotted(ion-icon[slot="end"]) {
   @include globals.margin(0, -0.2em, 0, 0.3em);
 }
+
+// Button Badge
+// --------------------------------------------------
+
+.button-native ::slotted(ion-badge) {
+  position: fixed;
+}
@@ -2,3 +2,6 @@
 
 // Button
 // --------------------------------------------------
+
+/// @prop - Badge padding inside button
+$button-badge-padding: 2px;