diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss
index 980645fa2f6..68e52e13321 100644
--- a/core/src/components/button/button.ios.scss
+++ b/core/src/components/button/button.ios.scss
@@ -1,5 +1,6 @@
@import "./button";
@import "./button.ios.vars";
+@import "../toolbar/toolbar.ios.vars";
// iOS Button
@@ -23,6 +24,20 @@
letter-spacing: #{$button-ios-letter-spacing};
}
+/**
+ * The default buttons in a toolbar
+ * have a different font size/weight
+ * than buttons outside of a toolbar on iOS.
+ * However, we still want the "size"/"strong"
+ * properties to be usable in a toolbar, so we add
+ * the .in-buttons selector such that we
+ * can add the different font size/weight in a toolbar
+ * but still let "size"/"strong" override it.
+ */
+:host(.in-buttons) {
+ font-size: #{$toolbar-ios-button-font-size};
+ font-weight: 400;
+}
// iOS Solid Button
// --------------------------------------------------
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 6947efaa74c..b183a79e060 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -293,6 +293,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
[`${buttonType}-strong`]: strong,
'in-toolbar': hostContext('ion-toolbar', this.el),
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
+ 'in-buttons': hostContext('ion-buttons', this.el),
'button-has-icon-only': hasIconOnly,
'button-disabled': disabled,
'ion-activatable': true,
diff --git a/core/src/components/button/test/size/button.e2e.ts b/core/src/components/button/test/size/button.e2e.ts
index 8ed140a90ae..9f84f090cb7 100644
--- a/core/src/components/button/test/size/button.e2e.ts
+++ b/core/src/components/button/test/size/button.e2e.ts
@@ -2,11 +2,53 @@ import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('button: size', () => {
- test('should not have visual regressions', async ({ page }) => {
- await page.goto(`/src/components/button/test/size`);
+ test.beforeEach(({ skip }) => {
+ skip.rtl();
+ });
+ test('should render small buttons', async ({ page }) => {
+ await page.setContent(`
+ Small Button
+ `);
+
+ const wrapper = page.locator('ion-button');
+
+ expect(await wrapper.screenshot()).toMatchSnapshot(`button-size-small-${page.getSnapshotSettings()}.png`);
+ });
+ test('should render large buttons', async ({ page }) => {
+ await page.setContent(`
+ Large Button
+ `);
+
+ const wrapper = page.locator('ion-button');
+
+ expect(await wrapper.screenshot()).toMatchSnapshot(`button-size-large-${page.getSnapshotSettings()}.png`);
+ });
+ test.describe('in ion-buttons', () => {
+ test('should render small button', async ({ page }) => {
+ await page.setContent(`
+
+ Small Button
+
+ `);
+
+ const wrapper = page.locator('ion-button');
+
+ expect(await wrapper.screenshot()).toMatchSnapshot(
+ `button-size-small-in-buttons-${page.getSnapshotSettings()}.png`
+ );
+ });
+ test('should render large button', async ({ page }) => {
+ await page.setContent(`
+
+ Large Button
+
+ `);
- await page.setIonViewport();
+ const wrapper = page.locator('ion-button');
- expect(await page.screenshot()).toMatchSnapshot(`button-size-${page.getSnapshotSettings()}.png`);
+ expect(await wrapper.screenshot()).toMatchSnapshot(
+ `button-size-large-in-buttons-${page.getSnapshotSettings()}.png`
+ );
+ });
});
});
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 927052c3f9b..00000000000
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index f24513e195f..00000000000
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index f9657b7c890..00000000000
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 70508955197..00000000000
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 3f3d793fdc7..00000000000
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index af6fb14b7bd..00000000000
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..54fd008f509
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..34b3a3cb10c
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..649994e1da3
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..01bab88eafb
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2efa9cc5325
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..365e23e0d28
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f7200b13675
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..9568f4d07c2
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6efb45ab333
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..645501a3b5a
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..74d1bcdbdf8
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d4e0ac0e1bb
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 63ce444f647..00000000000
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 84de97e109b..00000000000
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 4a5d216e6ca..00000000000
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index e6fa5f31cd8..00000000000
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 3687927d71d..00000000000
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index ffadf08fb33..00000000000
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c9102ff0388
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..36c811be7b8
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..46e792efef9
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0387c8e7624
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d7918303d0d
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..98b7d9c7d6f
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..aa0db1c7fad
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ccab1e1bdda
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3817a854974
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..dad1439f6d1
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..0fd8f36af90
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7c227a9b1b5
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/index.html b/core/src/components/button/test/size/index.html
index 2041db78275..88ed73095a3 100644
--- a/core/src/components/button/test/size/index.html
+++ b/core/src/components/button/test/size/index.html
@@ -18,6 +18,11 @@
+
+ Default Button
+ Small Button
+ Large Button
+
Button - Size
diff --git a/core/src/components/button/test/strong/button.e2e.ts b/core/src/components/button/test/strong/button.e2e.ts
index 87edc67bea0..fb7973bd04a 100644
--- a/core/src/components/button/test/strong/button.e2e.ts
+++ b/core/src/components/button/test/strong/button.e2e.ts
@@ -1,12 +1,57 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
+/**
+ * Clear buttons have special font-weight
+ * styles which is why we make sure
+ * to capture the clear button here.
+ */
test.describe('button: strong', () => {
- test('should not have visual regressions', async ({ page }) => {
- await page.goto(`/src/components/button/test/strong`);
+ test.beforeEach(({ skip }) => {
+ skip.rtl();
+ });
+ test('should render strong button', async ({ page }) => {
+ await page.setContent(`
+ Button
+ `);
+
+ const wrapper = page.locator('ion-button');
+
+ expect(await wrapper.screenshot()).toMatchSnapshot(`button-strong-${page.getSnapshotSettings()}.png`);
+ });
+ test('should render strong clear button', async ({ page }) => {
+ await page.setContent(`
+ Button
+ `);
+
+ const wrapper = page.locator('ion-button');
+
+ expect(await wrapper.screenshot()).toMatchSnapshot(`button-clear-strong-${page.getSnapshotSettings()}.png`);
+ });
+ test.describe('in ion-buttons', () => {
+ test('should render strong button', async ({ page }) => {
+ await page.setContent(`
+
+ Button
+
+ `);
+
+ const wrapper = page.locator('ion-button');
+
+ expect(await wrapper.screenshot()).toMatchSnapshot(`button-strong-in-buttons-${page.getSnapshotSettings()}.png`);
+ });
+ test('should render strong clear button', async ({ page }) => {
+ await page.setContent(`
+
+ Button
+
+ `);
- await page.setIonViewport();
+ const wrapper = page.locator('ion-button');
- expect(await page.screenshot()).toMatchSnapshot(`button-strong-${page.getSnapshotSettings()}.png`);
+ expect(await wrapper.screenshot()).toMatchSnapshot(
+ `button-clear-strong-in-buttons-${page.getSnapshotSettings()}.png`
+ );
+ });
});
});
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1db99405cd3
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..de5314e5b67
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..93418d15cb4
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1e9c4cebfbd
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d8b396f712a
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e6e537a940a
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7f412160ac5
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8e0a3f54366
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fcf75c27da0
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..09852c7a1d0
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3157e11594a
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a3470cdbf4c
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..58dc517650e
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..421dbbe92f8
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e96f5039275
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..68062692302
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e6bc094b44b
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e2432af297f
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Chrome-linux.png
index faaafa64964..0946be4b70a 100644
Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Firefox-linux.png
index 21886c12658..934d3c4b45c 100644
Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Safari-linux.png
index 9e046203851..eca3c43f85b 100644
Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 59dc21fe500..00000000000
Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index ef2c7f1deb9..00000000000
Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index d3b3274fbbf..00000000000
Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Chrome-linux.png
index c33b34e63ae..47e343a8161 100644
Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Firefox-linux.png
index ea24d8855e3..f92c5253f28 100644
Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Safari-linux.png
index 0709c55723d..dab7ccb6092 100644
Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 30320eb2ad3..00000000000
Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 76f66e7edbc..00000000000
Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index bf5d25990f1..00000000000
Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/strong/index.html b/core/src/components/button/test/strong/index.html
index 26d8a65d783..66c1fa02ad1 100644
--- a/core/src/components/button/test/strong/index.html
+++ b/core/src/components/button/test/strong/index.html
@@ -18,6 +18,11 @@
+
+ Solid Button
+ Outline Button
+ Clear Button
+
Button - Strong
diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss
index 786a8691731..c9868f959e3 100644
--- a/core/src/components/buttons/buttons.ios.scss
+++ b/core/src/components/buttons/buttons.ios.scss
@@ -12,9 +12,6 @@
@include margin-horizontal(2px, 2px);
height: 32px;
-
- font-size: #{$toolbar-ios-button-font-size};
- font-weight: 400;
}
::slotted(*) ion-button:not(.button-round) {
diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss
index bf0ec422ba4..cb10c4a4841 100644
--- a/core/src/components/buttons/buttons.md.scss
+++ b/core/src/components/buttons/buttons.md.scss
@@ -14,9 +14,6 @@
@include margin-horizontal(2px, 2px);
height: 32px;
-
- font-size: #{$toolbar-md-button-font-size};
- font-weight: 500;
}
::slotted(*) ion-button:not(.button-round) {