CR

Author: OS-pedrolourenco

core/src/components/badge/badge.common.scss

@@ -1,4 +1,3 @@
-@use "../../themes/ionic/ionic.globals.scss" as globals;
 @use "../../themes/functions.color" as color;
 @import "../../themes/mixins";
 @import "./badge.common.vars";
@@ -68,21 +67,16 @@
 // Badge in Button
 // --------------------------------------------------
 
-:host([vertical]:not(.in-tab-button).in-button) {
-  // stylelint-disable-next-line property-disallowed-list
-  right: globals.$ion-space-050;
-}
-
 :host(:not(:empty).in-button) {
-  min-width: globals.$ion-scale-400;
-  height: globals.$ion-scale-400;
+  min-width: $badge-size-in-button;
+  height: $badge-size-in-button;
 
-  font-size: globals.$ion-font-size-300;
+  font-size: $badge-font-size-in-button;
 
-  line-height: globals.$ion-font-line-height-500;
+  line-height: $badge-line-height-in-button;
 
   ::slotted(ion-icon) {
-    width: globals.$ion-scale-300;
-    height: globals.$ion-scale-300;
+    width: $badge-icon-size-in-button;
+    height: $badge-icon-size-in-button;
   }
 }

core/src/components/badge/badge.common.vars.scss

@@ -1,4 +1,5 @@
 @import "../../themes/functions.font";
+@import "../../themes/functions.sizes";
 
 // Badge
 // --------------------------------------------------
@@ -26,3 +27,15 @@ $badge-font-size: dynamic-font($badge-baseline-font-size);
 
 /// @prop - Font weight of the badge
 $badge-font-weight: bold;
+
+/// @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;

core/src/components/badge/badge.ionic.scss

@@ -1,5 +1,6 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 @use "./badge.common";
+@import "../../themes/mixins";
 
 // Ionic Badge
 // --------------------------------------------------
@@ -194,7 +195,14 @@
 // 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) {
-  // stylelint-disable-next-line property-disallowed-list
-  right: calc(-1 * globals.$ion-space-050);
+  @include position(null, calc(-1 * var(globals.$ion-space-050)), null, null);
+}
+
+: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 position(null, globals.$ion-space-050, null, null);
 }

core/src/components/button/button.common.scss

@@ -1,4 +1,4 @@
-@use "../../themes/ionic/ionic.globals.scss" as globals;
+@import "../../themes/mixins";
 @import "./button.vars";
 
 // Button
@@ -314,15 +314,35 @@ ion-ripple-effect {
 // This rule only works in Chrome
 :has(ion-badge) .button-native {
   overflow: visible;
+
+  ion-ripple-effect {
+    // stylelint-disable-next-line property-disallowed-list
+    border-radius: inherit;
+  }
+
+  &::after {
+    // stylelint-disable-next-line property-disallowed-list
+    border-radius: inherit;
+  }
 }
 
 // This rule only works in Safari
 :host(:has(ion-badge)) .button-native {
   overflow: visible;
+
+  ion-ripple-effect {
+    // stylelint-disable-next-line property-disallowed-list
+    border-radius: inherit;
+  }
+
+  &::after {
+    // stylelint-disable-next-line property-disallowed-list
+    border-radius: inherit;
+  }
 }
 
 :host ::slotted(ion-badge[vertical]:not(:empty)) {
-  @include globals.padding(globals.$ion-scale-050);
+  @include padding($button-badge-padding);
 
   display: flex;
 

core/src/components/button/button.ionic.scss

@@ -290,18 +290,3 @@
 :host(.button-xlarge) ::slotted(ion-spinner[slot="end"]) {
   @include globals.margin-horizontal(globals.$ion-space-300, null);
 }
-
-// Button Badge
-// --------------------------------------------------
-
-:has(ion-badge) .button-native {
-  ion-ripple-effect {
-    // stylelint-disable-next-line property-disallowed-list
-    border-radius: inherit;
-  }
-
-  &::after {
-    // stylelint-disable-next-line property-disallowed-list
-    border-radius: inherit;
-  }
-}

core/src/components/button/button.native.scss

@@ -26,8 +26,6 @@
 // Button Badge
 // --------------------------------------------------
 
-:has(ion-badge) .button-native {
-  ::slotted(ion-badge) {
-    position: fixed;
-  }
+.button-native ::slotted(ion-badge) {
+  position: fixed;
 }

core/src/components/button/button.vars.scss

@@ -2,3 +2,6 @@
 
 // Button
 // --------------------------------------------------
+
+/// @prop - Badge padding inside button
+$button-badge-padding: 2px;