diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss
index efa7690fefe..8ec11b4d7bd 100644
--- a/core/src/components/badge/badge.ionic.scss
+++ b/core/src/components/badge/badge.ionic.scss
@@ -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;
+ }
+}
diff --git a/core/src/components/badge/badge.native.scss b/core/src/components/badge/badge.native.scss
index f2422de7ddb..ab862cca701 100644
--- a/core/src/components/badge/badge.native.scss
+++ b/core/src/components/badge/badge.native.scss
@@ -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;
+ }
+}
diff --git a/core/src/components/badge/badge.native.vars.scss b/core/src/components/badge/badge.native.vars.scss
index 76cdfed047f..e14a0abb23b 100644
--- a/core/src/components/badge/badge.native.vars.scss
+++ b/core/src/components/badge/badge.native.vars.scss
@@ -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;
diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx
index 4164952a15f..bf100a22de0 100644
--- a/core/src/components/badge/badge.tsx
+++ b/core/src/components/badge/badge.tsx
@@ -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),
})}
>
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts b/core/src/components/badge/test/hint/badge.e2e.ts
index a9cd712daab..1bc539f03d2 100644
--- a/core/src/components/badge/test/hint/badge.e2e.ts
+++ b/core/src/components/badge/test/hint/badge.e2e.ts
@@ -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`));
+ });
+ });
});
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f2fe1b8341d
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-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-button-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..bff98ef6503
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-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-button-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..43cf70864e2
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-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-button-bottom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..6ae14aa1bc4
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..dc2aa901690
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..303a9f1e651
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..50f41692c0e
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5e065da2dad
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f671068b37f
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..da7873f1dc4
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-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-button-top-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c28d137cafc
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-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-button-top-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8393b9eca1f
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-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-button-top-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4606cf420d8
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..eaa5f9d311d
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1cbbc9a1268
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..bb298a876e9
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..169cf1f865d
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..5e539c53544
Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-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 064da263eb3..76819824b55 100644
--- a/core/src/components/badge/test/hint/index.html
+++ b/core/src/components/badge/test/hint/index.html
@@ -365,6 +365,58 @@
+
+
+
+ Inside Button - Top Placement
+
+
+
+
+
+
+
+
+ 1
+
+
+
+ 99+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inside Button - Bottom Placement
+
+
+
+
+
+
+
+
+ 1
+
+
+
+ 99+
+
+
+
+
+
+
+
+
+
diff --git a/core/src/components/button/button.common.scss b/core/src/components/button/button.common.scss
index 2e78b86849f..e18c9b4345f 100644
--- a/core/src/components/button/button.common.scss
+++ b/core/src/components/button/button.common.scss
@@ -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 {
+ --overflow: visible;
+}
+
+:host ::slotted(ion-badge[vertical]:not(:empty)) {
+ @include padding($button-badge-padding);
+
+ display: flex;
+
+ align-items: center;
+ justify-content: center;
+}
diff --git a/core/src/components/button/button.native.scss b/core/src/components/button/button.native.scss
index c024b371040..e42e9fda590 100644
--- a/core/src/components/button/button.native.scss
+++ b/core/src/components/button/button.native.scss
@@ -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;
+}
diff --git a/core/src/components/button/button.vars.scss b/core/src/components/button/button.vars.scss
index ed9f2a6a8a9..60fc6a4b8cd 100644
--- a/core/src/components/button/button.vars.scss
+++ b/core/src/components/button/button.vars.scss
@@ -2,3 +2,6 @@
// Button
// --------------------------------------------------
+
+/// @prop - Badge padding inside button
+$button-badge-padding: 2px;
diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png
index 80e6fe465d7..71793a26556 100644
Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png
index 77def9079f5..df435b0ec42 100644
Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Safari-linux.png
index fa21e61d42c..3fbbc84e457 100644
Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png
index ec4a6b8d00b..98a04b419d2 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png
index fadfb609540..fbd3d5b03cd 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png
index c6732a1ee87..c53c7f0ce18 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png
index d7e92e91882..91c2442090d 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png
index fc26c3f7132..2bf9bb841e5 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png
index 01d66b7dc65..d3cb8f4ad5c 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png
index 20aacae9f8c..913ede6bb04 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png
index a5a7de164c5..e8a004e2f89 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png
index 74f5cc7e45c..3760723cb01 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png
index 8d4b0f58515..3e56d80c45f 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png
index ed1c3fa24e8..ebc008f459e 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png
index 05eb3a77db4..65fa700f98a 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png
index 61f248a7b5b..f9b401c58d4 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Chrome-linux.png
index f8263f0451c..bf81886dd34 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Firefox-linux.png
index d5537f9e787..94ec05a0a9a 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Safari-linux.png
index 889e67f263a..0bf77a71963 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png
index 5270583bd44..267d23baf9d 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Chrome-linux.png
index 126ec500c50..c0d9135ffed 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Safari-linux.png
index bbb06cf66c0..4556c8925c4 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Chrome-linux.png
index a3a48e6ce38..d1c6e22102d 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Firefox-linux.png
index a3eb4173f63..f8b6633ff00 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Safari-linux.png
index 37b85889ca5..0d84f1807df 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Chrome-linux.png
index 34b70f83715..f4827520540 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Firefox-linux.png
index 4165eae8409..93d202029ca 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Safari-linux.png
index 7141c60396d..c584c8400d7 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Chrome-linux.png
index bd572c4abec..06dca0af6b2 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Firefox-linux.png
index 85e3871f185..d806d55134a 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Safari-linux.png
index e31fac1f928..e8713628b7d 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Chrome-linux.png
index 583b37c83b6..eb63095b406 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Firefox-linux.png
index 0c7cefa6dd8..2e34efabb7b 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Safari-linux.png
index 22d43f518b7..01589a76e8e 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Safari-linux.png differ