diff --git a/angular/test/base/src/app/tabs-tab1/tabs-tab1.component.html b/angular/test/base/src/app/tabs-tab1/tabs-tab1.component.html
index 986ca90c1b..c9aefba4ee 100644
--- a/angular/test/base/src/app/tabs-tab1/tabs-tab1.component.html
+++ b/angular/test/base/src/app/tabs-tab1/tabs-tab1.component.html
@@ -7,8 +7,12 @@
 <ion-content class="ion-padding">
   <h1>Welcome to Tab1</h1>
   <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
-    <ion-segment-button value="one">One</ion-segment-button>
-    <ion-segment-button value="two">Two</ion-segment-button>
+    <ion-segment-button value="one">
+      <ion-label>One</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="two">
+      <ion-label>Two</ion-label>
+    </ion-segment-button>
   </ion-segment>
   <p>
     Segment changed: <span class="segment-changed">{{changed}}</span>
diff --git a/angular/test/base/src/app/tabs-tab2/tabs-tab2.component.html b/angular/test/base/src/app/tabs-tab2/tabs-tab2.component.html
index 3975830f77..93853ab16d 100644
--- a/angular/test/base/src/app/tabs-tab2/tabs-tab2.component.html
+++ b/angular/test/base/src/app/tabs-tab2/tabs-tab2.component.html
@@ -7,8 +7,12 @@
 <ion-content class="ion-padding">
   <h1>Welcome to Tab 2</h1>
   <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
-    <ion-segment-button value="one">One</ion-segment-button>
-    <ion-segment-button value="two">Two</ion-segment-button>
+    <ion-segment-button value="one">
+      <ion-label>One</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="two">
+      <ion-label>Two</ion-label>
+    </ion-segment-button>
   </ion-segment>
   <p>
     Segment changed: <span class="segment-changed">{{changed}}</span>
diff --git a/core/src/components/segment-button/segment-button.ios.scss b/core/src/components/segment-button/segment-button.ios.scss
index fc90e5e398..2c95ea0b4e 100644
--- a/core/src/components/segment-button/segment-button.ios.scss
+++ b/core/src/components/segment-button/segment-button.ios.scss
@@ -30,7 +30,6 @@
 
   position: relative;
 
-  flex-basis: 0;
   flex-direction: row;
 
   min-width: #{$segment-button-ios-min-width};
diff --git a/core/src/components/segment-button/segment-button.md.scss b/core/src/components/segment-button/segment-button.md.scss
index 175893f2f9..9ee5b85f5e 100644
--- a/core/src/components/segment-button/segment-button.md.scss
+++ b/core/src/components/segment-button/segment-button.md.scss
@@ -27,7 +27,6 @@
 
   min-width: $segment-button-md-min-width;
 
-  max-width: $segment-button-md-max-width;
   min-height: $segment-button-md-min-height;
 
   border-width: var(--border-width);
diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss
index 7342a9337a..fe89437bcc 100644
--- a/core/src/components/segment-button/segment-button.scss
+++ b/core/src/components/segment-button/segment-button.scss
@@ -57,7 +57,6 @@
 
   position: relative;
 
-  flex: 1 1 auto;
   flex-direction: column;
 
   height: auto;
@@ -71,9 +70,11 @@
 
   white-space: nowrap;
 
-  font-kerning: none;
-
   cursor: pointer;
+
+  grid-row: 1;
+
+  font-kerning: none;
 }
 
 .button-native {
@@ -210,12 +211,16 @@
 
   align-self: center;
 
+  max-width: 100%;
+
   line-height: 22px;
 
   text-overflow: ellipsis;
 
   white-space: nowrap;
 
+  overflow: hidden;
+
   box-sizing: border-box;
 
   pointer-events: none;
@@ -310,4 +315,4 @@ ion-ripple-effect {
   .segment-button-indicator-animated {
     transition: none;
   }
-}
\ No newline at end of file
+}
diff --git a/core/src/components/segment/segment.md.scss b/core/src/components/segment/segment.md.scss
index 6c299e0ff7..6efc1174e7 100644
--- a/core/src/components/segment/segment.md.scss
+++ b/core/src/components/segment/segment.md.scss
@@ -6,6 +6,8 @@
 
 :host {
   --background: transparent;
+
+  grid-auto-columns: minmax(auto, $segment-button-md-max-width);
 }
 
 // Segment: In Toolbar
diff --git a/core/src/components/segment/segment.scss b/core/src/components/segment/segment.scss
index 42bb468692..f4e8ca9cfe 100644
--- a/core/src/components/segment/segment.scss
+++ b/core/src/components/segment/segment.scss
@@ -11,7 +11,9 @@
 
   @include font-smoothing();
 
-  display: flex;
+  display: grid;
+
+  grid-auto-columns: 1fr;
 
   position: relative;
 
@@ -41,6 +43,8 @@
   width: auto;
 
   overflow-x: auto;
+
+  grid-auto-columns: minmax(min-content, 1fr);
 }
 
 :host(.segment-scrollable::-webkit-scrollbar) {
diff --git a/core/src/components/segment/test/basic/index.html b/core/src/components/segment/test/basic/index.html
index be76eafb28..f9eb7a5261 100644
--- a/core/src/components/segment/test/basic/index.html
+++ b/core/src/components/segment/test/basic/index.html
@@ -23,53 +23,91 @@
 
         <ion-toolbar>
           <ion-segment class="event-tester" value="Free">
-            <ion-segment-button value="Paid"> PaidPaidPaid </ion-segment-button>
-            <ion-segment-button value="Free"> Free </ion-segment-button>
-            <ion-segment-button value="Top"> Top </ion-segment-button>
+            <ion-segment-button value="Paid">
+              <ion-label>PaidPaidPaid</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="Free">
+              <ion-label>Free</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="Top">
+              <ion-label>Top</ion-label>
+            </ion-segment-button>
           </ion-segment>
         </ion-toolbar>
 
         <ion-toolbar>
           <ion-segment value="2" scrollable="true">
-            <ion-segment-button value="1">Button 1</ion-segment-button>
-            <ion-segment-button value="2">Button 3</ion-segment-button>
-            <ion-segment-button value="3">Button 3</ion-segment-button>
-            <ion-segment-button value="4">Button 4</ion-segment-button>
-            <ion-segment-button value="5">Button 5</ion-segment-button>
-            <ion-segment-button value="6">Button 6</ion-segment-button>
+            <ion-segment-button value="1">
+              <ion-label>Button 1</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="2">
+              <ion-label>Button 2</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="3">
+              <ion-label>Button 3</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="4">
+              <ion-label>Button 4</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="5">
+              <ion-label>Button 5</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="6">
+              <ion-label>Button 6</ion-label>
+            </ion-segment-button>
           </ion-segment>
         </ion-toolbar>
 
         <ion-toolbar>
           <ion-segment name="dynamicPropDisable" disabled color="danger">
-            <ion-segment-button value="Bookmarks"> Bookmarks </ion-segment-button>
-            <ion-segment-button value="Reading List"> Reading List </ion-segment-button>
-            <ion-segment-button value="Shared Links"> Shared Links </ion-segment-button>
+            <ion-segment-button value="Bookmarks">
+              <ion-label>Bookmarks</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="Reading List">
+              <ion-label>Reading List</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="Shared Links">
+              <ion-label>Shared Links</ion-label>
+            </ion-segment-button>
           </ion-segment>
         </ion-toolbar>
 
         <ion-toolbar>
           <ion-segment name="dynamicAttrElem" color="secondary" value="active">
-            <ion-segment-button value="active"> Active </ion-segment-button>
-            <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
-              Disabled
+            <ion-segment-button value="active">
+              <ion-label>Active</ion-label>
+            </ion-segment-button>
+            <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
+              <ion-label>Disabled</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="inactive" disabled="false">
+              <ion-label>Inactive</ion-label>
             </ion-segment-button>
-            <ion-segment-button value="inactive" disabled="false"> Inactive </ion-segment-button>
           </ion-segment>
         </ion-toolbar>
 
         <ion-toolbar>
           <ion-segment value="all">
-            <ion-segment-button value="all"> All </ion-segment-button>
-            <ion-segment-button value="missed"> Missed </ion-segment-button>
+            <ion-segment-button value="all">
+              <ion-label>All</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="missed">
+              <ion-label>Missed</ion-label>
+            </ion-segment-button>
           </ion-segment>
         </ion-toolbar>
       </ion-header>
 
       <ion-segment value="segment">
-        <ion-segment-button value="segment"> Segment </ion-segment-button>
-        <ion-segment-button value="outside"> Outside </ion-segment-button>
-        <ion-segment-button value="content"> Content </ion-segment-button>
+        <ion-segment-button value="segment">
+          <ion-label>Segment</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="outside">
+          <ion-label>Outside</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="content">
+          <ion-label>Content</ion-label>
+        </ion-segment-button>
       </ion-segment>
 
       <ion-content>
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts b/core/src/components/segment/test/basic/segment.e2e.ts
index f9f13b22ac..b158d78d33 100644
--- a/core/src/components/segment/test/basic/segment.e2e.ts
+++ b/core/src/components/segment/test/basic/segment.e2e.ts
@@ -7,9 +7,15 @@ configs().forEach(({ title, screenshot, config }) => {
       await page.setContent(
         `
         <ion-segment>
-          <ion-segment-button value="a">First</ion-segment-button>
-          <ion-segment-button value="b">Second</ion-segment-button>
-          <ion-segment-button value="c">Third</ion-segment-button>
+          <ion-segment-button value="a">
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
@@ -23,9 +29,15 @@ configs().forEach(({ title, screenshot, config }) => {
       await page.setContent(
         `
         <ion-segment value="a">
-          <ion-segment-button value="a">First</ion-segment-button>
-          <ion-segment-button value="b">Second</ion-segment-button>
-          <ion-segment-button value="c">Third</ion-segment-button>
+          <ion-segment-button value="a">
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
@@ -47,9 +59,15 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await page.setContent(
         `
         <ion-segment value="b">
-          <ion-segment-button value="a">First</ion-segment-button>
-          <ion-segment-button value="b" disabled="true">Second</ion-segment-button>
-          <ion-segment-button value="c">Third</ion-segment-button>
+          <ion-segment-button value="a">
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b" disabled="true">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
@@ -64,9 +82,15 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await page.setContent(
         `
         <ion-segment value="b" color="danger">
-          <ion-segment-button value="a">First</ion-segment-button>
-          <ion-segment-button value="b">Second</ion-segment-button>
-          <ion-segment-button value="c">Third</ion-segment-button>
+          <ion-segment-button value="a">
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Chrome-linux.png
index 9df96146a3..6e0b05c485 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Safari-linux.png
index 087575d8fd..4e5e570d7f 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Chrome-linux.png
index f408b00049..cc655fb527 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Firefox-linux.png
index 3fe3e3bc5b..f609c4769b 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Safari-linux.png
index 434ce0d869..a87d8dc1f1 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Chrome-linux.png
index 7be524098a..b5bcb45b8a 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Safari-linux.png
index 7441d84db6..1e7a6d2548 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Chrome-linux.png
index ff5ab4b17e..9ef61a597b 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Firefox-linux.png
index b598bb20bc..77b5dd3e03 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Safari-linux.png
index d96456e6d2..ae93e12bf4 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Chrome-linux.png
index c027a936b6..e92e3e31d7 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Safari-linux.png
index bbd022aa3e..39a9fc75d5 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Chrome-linux.png
index dfc79d8026..d64a915333 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Safari-linux.png
index bec8f30106..72a357e83f 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Chrome-linux.png
index d77e44c84a..58267e8f77 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Firefox-linux.png
index 623c472064..7835b32983 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Safari-linux.png
index 5e3dccc7f6..52c19c3505 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Chrome-linux.png
index 181a8f3786..61268eec1b 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Firefox-linux.png
index d309c9a615..3c34c998ca 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Safari-linux.png
index b0ad2b60c6..ebe1278a95 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Chrome-linux.png
index 65ddd350ae..0799097194 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Safari-linux.png
index 1ce6b15d18..e246e83632 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Chrome-linux.png
index 0ff4b82b63..efa064a090 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Safari-linux.png
index e74b025ce7..85c1eb3ae7 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Chrome-linux.png
index e5a69579ca..8a5f4e02f8 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Firefox-linux.png
index 7598573c26..bcad5e0f85 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Safari-linux.png
index 3e429799df..5fb426a029 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Chrome-linux.png
index bdc70d4140..4b210d8e22 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Firefox-linux.png
index 9cd4bc4dc6..fb0b2f5440 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Safari-linux.png
index b96cea196f..29211ebd0e 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Chrome-linux.png
index 6e867e6983..2aaf5b0a22 100644
Binary files a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Firefox-linux.png
index 8eea7b8fc0..5e3def9d9d 100644
Binary files a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Safari-linux.png
index bb8d5adf8a..6ede1da44a 100644
Binary files a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Chrome-linux.png
index 854f22b74e..9e9550325d 100644
Binary files a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Firefox-linux.png
index be923b069f..aa1aecd42a 100644
Binary files a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Safari-linux.png
index d0c7d91815..4dd517ad43 100644
Binary files a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Chrome-linux.png
index fb7e93656d..8f95e073a7 100644
Binary files a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Firefox-linux.png
index 39bd55b844..7caa4c4323 100644
Binary files a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Safari-linux.png
index 1f8555d1fc..04aefd8fc9 100644
Binary files a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Chrome-linux.png
index 48f9f037e6..15cc2d07dc 100644
Binary files a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Firefox-linux.png
index bbf4722690..cb0dfd4cff 100644
Binary files a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Safari-linux.png
index 7941f4ee17..a5d259e8dd 100644
Binary files a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/scrollable/segment.e2e.ts b/core/src/components/segment/test/scrollable/segment.e2e.ts
index d40258a70f..3a21b9ac92 100644
--- a/core/src/components/segment/test/scrollable/segment.e2e.ts
+++ b/core/src/components/segment/test/scrollable/segment.e2e.ts
@@ -7,15 +7,33 @@ configs().forEach(({ title, screenshot, config }) => {
       await page.setContent(
         `
         <ion-segment scrollable="true" value="2">
-          <ion-segment-button value="1">First</ion-segment-button>
-          <ion-segment-button value="2">Second</ion-segment-button>
-          <ion-segment-button value="3">Third</ion-segment-button>
-          <ion-segment-button value="4">Fourth</ion-segment-button>
-          <ion-segment-button value="5">Fifth</ion-segment-button>
-          <ion-segment-button value="6">Sixth</ion-segment-button>
-          <ion-segment-button value="7">Seventh</ion-segment-button>
-          <ion-segment-button value="8">Eigth</ion-segment-button>
-          <ion-segment-button value="9">Nineth</ion-segment-button>
+          <ion-segment-button value="1">
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="2">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="3">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="4">
+            <ion-label>Fourth</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="5">
+            <ion-label>Fifth</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="6">
+            <ion-label>Sixth</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="7">
+            <ion-label>Seventh</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="8">
+            <ion-label>Eighth</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="9">
+            <ion-label>Ninth</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
diff --git a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Chrome-linux.png
index 184a1c5313..7894f9ffa0 100644
Binary files a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Firefox-linux.png
index 31bfe165eb..d3ec69ee3f 100644
Binary files a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Safari-linux.png
index b0cdcd2699..503f7f7bb4 100644
Binary files a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Chrome-linux.png
index 908195695c..ec1161a0fa 100644
Binary files a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Firefox-linux.png
index b508faef93..e6733293fe 100644
Binary files a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Safari-linux.png
index 50c1473a77..fede3a3f2d 100644
Binary files a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/segment-events.e2e.ts b/core/src/components/segment/test/segment-events.e2e.ts
index f0b10d0e9a..71aa7bdf80 100644
--- a/core/src/components/segment/test/segment-events.e2e.ts
+++ b/core/src/components/segment/test/segment-events.e2e.ts
@@ -11,9 +11,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await page.setContent(
           `
           <ion-segment>
-            <ion-segment-button value="1">One</ion-segment-button>
-            <ion-segment-button value="2">Two</ion-segment-button>
-            <ion-segment-button value="3">Three</ion-segment-button>
+            <ion-segment-button value="1">
+              <ion-label>One</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="2">
+              <ion-label>Two</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="3">
+              <ion-label>Three</ion-label>
+            </ion-segment-button>
           </ion-segment>
       `,
           config
@@ -40,9 +46,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await page.setContent(
           `
             <ion-segment value="1">
-              <ion-segment-button value="1">One</ion-segment-button>
-              <ion-segment-button value="2">Two</ion-segment-button>
-              <ion-segment-button value="3">Three</ion-segment-button>
+              <ion-segment-button value="1">
+                <ion-label>One</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="2">
+                <ion-label>Two</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="3">
+                <ion-label>Three</ion-label>
+              </ion-segment-button>
             </ion-segment>
           `,
           config
@@ -65,9 +77,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await page.setContent(
           `
             <ion-segment>
-              <ion-segment-button value="1">One</ion-segment-button>
-              <ion-segment-button value="2">Two</ion-segment-button>
-              <ion-segment-button value="3">Three</ion-segment-button>
+              <ion-segment-button value="1">
+                <ion-label>One</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="2">
+                <ion-label>Two</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="3">
+                <ion-label>Three</ion-label>
+              </ion-segment-button>
             </ion-segment>
           `,
           config
@@ -100,9 +118,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           <ion-app>
             <ion-toolbar>
               <ion-segment value="1">
-                <ion-segment-button value="1">One</ion-segment-button>
-                <ion-segment-button value="2">Two</ion-segment-button>
-                <ion-segment-button value="3">Three</ion-segment-button>
+                <ion-segment-button value="1">
+                  <ion-label>One</ion-label>
+                </ion-segment-button>
+                <ion-segment-button value="2">
+                  <ion-label>Two</ion-label>
+                </ion-segment-button>
+                <ion-segment-button value="3">
+                  <ion-label>Three</ion-label>
+                </ion-segment-button>
               </ion-segment>
             </ion-toolbar>
           </ion-app>
@@ -129,9 +153,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await page.setContent(
           `
           <ion-segment value="1">
-            <ion-segment-button value="1">One</ion-segment-button>
-            <ion-segment-button value="2">Two</ion-segment-button>
-            <ion-segment-button value="3">Three</ion-segment-button>
+            <ion-segment-button value="1">
+              <ion-label>One</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="2">
+              <ion-label>Two</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="3">
+              <ion-label>Three</ion-label>
+            </ion-segment-button>
           </ion-segment>
         `,
           config
@@ -158,9 +188,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.setContent(
         `
         <ion-segment value="1">
-          <ion-segment-button value="1">One</ion-segment-button>
-          <ion-segment-button value="2">Two</ion-segment-button>
-          <ion-segment-button value="3">Three</ion-segment-button>
+          <ion-segment-button value="1">
+            <ion-label>One</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="2">
+            <ion-label>Two</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="3">
+            <ion-label>Three</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
@@ -180,9 +216,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.setContent(
         `
         <ion-segment value="1">
-          <ion-segment-button value="1">One</ion-segment-button>
-          <ion-segment-button value="2">Two</ion-segment-button>
-          <ion-segment-button value="3">Three</ion-segment-button>
+          <ion-segment-button value="1">
+            <ion-label>One</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="2">
+            <ion-label>Two</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="3">
+            <ion-label>Three</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
@@ -206,9 +248,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.setContent(
         `
         <ion-segment value="1" swipe-gesture="false">
-          <ion-segment-button value="1">One</ion-segment-button>
-          <ion-segment-button value="2">Two</ion-segment-button>
-          <ion-segment-button value="3">Three</ion-segment-button>
+          <ion-segment-button value="1">
+            <ion-label>One</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="2">
+            <ion-label>Two</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="3">
+            <ion-label>Three</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
diff --git a/core/src/components/segment/test/segment.spec.ts b/core/src/components/segment/test/segment.spec.ts
index 18f5566311..b9f55b3334 100644
--- a/core/src/components/segment/test/segment.spec.ts
+++ b/core/src/components/segment/test/segment.spec.ts
@@ -10,7 +10,10 @@ it('should disable segment buttons added to disabled segment async', async () =>
   });
 
   const segment = page.body.querySelector('ion-segment');
-  segment.innerHTML = `<ion-segment-button>Segment Button</ion-segment-button>`;
+  segment.innerHTML = `
+    <ion-segment-button>
+      <ion-label>Segment Button</ion-label>
+    </ion-segment-button>`;
   await page.waitForChanges();
 
   const segmentButton = page.body.querySelector('ion-segment-button');
@@ -22,7 +25,9 @@ it('should set checked state when value is set asynchronously', async () => {
     components: [Segment, SegmentButton],
     html: `
       <ion-segment value="first">
-        <ion-segment-button>First</ion-segment-button>
+        <ion-segment-button>
+          <ion-label>First</ion-label>
+        </ion-segment-button>
       </ion-segment>
     `,
   });
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts b/core/src/components/segment/test/toolbar/segment.e2e.ts
index a3687a6feb..55151ede46 100644
--- a/core/src/components/segment/test/toolbar/segment.e2e.ts
+++ b/core/src/components/segment/test/toolbar/segment.e2e.ts
@@ -9,9 +9,15 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-header>
           <ion-toolbar>
             <ion-segment value="a">
-              <ion-segment-button value="a">First</ion-segment-button>
-              <ion-segment-button value="b">Second</ion-segment-button>
-              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+              <ion-segment-button value="a">
+                <ion-label>First</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="b">
+                <ion-label>Second</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="c" disabled="true">
+                <ion-label>Third</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
         </ion-header>
@@ -30,30 +36,54 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-header>
           <ion-toolbar color="primary">
             <ion-segment value="a">
-              <ion-segment-button value="a">First</ion-segment-button>
-              <ion-segment-button value="b">Second</ion-segment-button>
-              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+              <ion-segment-button value="a">
+                <ion-label>First</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="b">
+                <ion-label>Second</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="c" disabled="true">
+                <ion-label>Third</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
           <ion-toolbar color="light">
             <ion-segment value="a">
-              <ion-segment-button value="a">First</ion-segment-button>
-              <ion-segment-button value="b">Second</ion-segment-button>
-              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+              <ion-segment-button value="a">
+                <ion-label>First</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="b">
+                <ion-label>Second</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="c" disabled="true">
+                <ion-label>Third</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
           <ion-toolbar color="medium">
             <ion-segment value="a">
-              <ion-segment-button value="a">First</ion-segment-button>
-              <ion-segment-button value="b">Second</ion-segment-button>
-              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+              <ion-segment-button value="a">
+                <ion-label>First</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="b">
+                <ion-label>Second</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="c" disabled="true">
+                <ion-label>Third</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
           <ion-toolbar color="dark">
             <ion-segment value="a">
-              <ion-segment-button value="a">First</ion-segment-button>
-              <ion-segment-button value="b">Second</ion-segment-button>
-              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+              <ion-segment-button value="a">
+                <ion-label>First</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="b">
+                <ion-label>Second</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="c" disabled="true">
+                <ion-label>Third</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
         </ion-header>
@@ -84,9 +114,15 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         <ion-header>
           <ion-toolbar mode="ios" color="primary">
             <ion-segment mode="md" value="a">
-              <ion-segment-button value="a">First</ion-segment-button>
-              <ion-segment-button value="b">Second</ion-segment-button>
-              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+              <ion-segment-button value="a">
+                <ion-label>First</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="b">
+                <ion-label>Second</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="c" disabled="true">
+                <ion-label>Third</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
         </ion-header>
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Chrome-linux.png
index 522b236f31..50289ae027 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Firefox-linux.png
index d7c81a3fcd..8c8a0fa592 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Safari-linux.png
index 5d81610a60..240ff6131b 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Chrome-linux.png
index 4747e32d1a..ff2ea2b1c0 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Firefox-linux.png
index 703a18b1cc..fb195f3df1 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Safari-linux.png
index 944c48abda..bc3ec4e461 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Chrome-linux.png
index 0205164369..dcb4fcedd6 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Firefox-linux.png
index a2718f8300..df02c33b04 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Safari-linux.png
index b9c20f151a..52d669a9a4 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Chrome-linux.png
index 47f4b4032f..e30467a81b 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Firefox-linux.png
index dc4cab330f..9e9f07f8f8 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Safari-linux.png
index a93e89ec25..65058d8e86 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Chrome-linux.png
index 501d2eeb14..fbe789fa9e 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Firefox-linux.png
index 8394553b5c..bccbdda0a4 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Safari-linux.png
index 4e7953ff99..e22980fe88 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Chrome-linux.png
index 55ca8d85d2..a37b76c40c 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Firefox-linux.png
index 5fd9425dd1..6c500e1658 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Safari-linux.png
index 8f49d2913c..bfc8d86397 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Chrome-linux.png
index a0782c44d5..c07b20e2c7 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Firefox-linux.png
index 86130a86ca..f71b915f9e 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Safari-linux.png
index b28c6030f4..6fef1d1b59 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Chrome-linux.png
index f9f9f13672..e40eef3811 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Firefox-linux.png
index ce1fafc9bc..c7816999c7 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Safari-linux.png
index e6cc4b6abb..9fa0546c1d 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Chrome-linux.png
index 41f4e42973..4c5ada2c80 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Firefox-linux.png
index 78b108f692..c51a63cfc7 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Safari-linux.png
index 63fdae8044..69d0e45b36 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts b/core/src/components/segment/test/wrap/segment.e2e.ts
new file mode 100644
index 0000000000..a75594ed18
--- /dev/null
+++ b/core/src/components/segment/test/wrap/segment.e2e.ts
@@ -0,0 +1,103 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('segment: wrap'), () => {
+    test('should wrap long text', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-segment>
+          <ion-segment-button value="long">
+            <ion-label>This is the button that never ends it just goes on and on my friends</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="free">
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="purchased">
+            <ion-label>Purchased</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      `,
+        config
+      );
+
+      const segment = page.locator('ion-segment');
+
+      await expect(segment).toHaveScreenshot(screenshot(`segment-wrap`));
+    });
+    test('should wrap long text with an icon', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-segment>
+          <ion-segment-button value="long">
+            <ion-icon name="heart-outline"></ion-icon>
+            <ion-label>This is the button that never ends it just goes on and on my friends</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="free">
+            <ion-icon name="star-outline"></ion-icon>
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="purchased">
+            <ion-icon name="square-outline"></ion-icon>
+            <ion-label>Purchased</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      `,
+        config
+      );
+
+      const segment = page.locator('ion-segment');
+
+      await expect(segment).toHaveScreenshot(screenshot(`segment-wrap-icon`));
+    });
+    test('should wrap long text with a start icon', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-segment>
+          <ion-segment-button layout="icon-start" value="long">
+            <ion-icon name="heart-outline"></ion-icon>
+            <ion-label>This is the button that never ends it just goes on and on my friends</ion-label>
+          </ion-segment-button>
+          <ion-segment-button layout="icon-start" value="free">
+            <ion-icon name="star-outline"></ion-icon>
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button layout="icon-start" value="purchased">
+            <ion-icon name="square-outline"></ion-icon>
+            <ion-label>Purchased</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      `,
+        config
+      );
+
+      const segment = page.locator('ion-segment');
+
+      await expect(segment).toHaveScreenshot(screenshot(`segment-wrap-icon-start`));
+    });
+    test('should wrap long text in a toolbar', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-toolbar>
+          <ion-segment>
+            <ion-segment-button value="long">
+              <ion-label>This is the button that never ends it just goes on and on my friends</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="free">
+              <ion-label>Free</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="purchased">
+              <ion-label>Purchased</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+      `,
+        config
+      );
+
+      const toolbar = page.locator('ion-toolbar');
+
+      await expect(toolbar).toHaveScreenshot(screenshot(`segment-wrap-toolbar`));
+    });
+  });
+});
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..366056103e
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..152e91e0be
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..dd4e01b525
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..38a2e24278
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1d695e782d
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1aac22e94e
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ef1617ff7d
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3e41a0e0e9
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ab18a144db
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..cb2591e854
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..62a7b2fd96
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c405d42cc5
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..784571f31f
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..56c28bb732
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..bf02bd3117
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..72e8d787ab
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..4225a5635a
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9db3c2ad70
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3807445fb7
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..bb783bee09
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a9e3dfe2ae
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..37ea113a99
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..dca445f8c4
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..409c7e280b
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html
index c33c2a3ad9..97ce01d8ef 100644
--- a/core/src/themes/test/css-variables/index.html
+++ b/core/src/themes/test/css-variables/index.html
@@ -699,33 +699,57 @@
                 </p>
                 <p>
                   <ion-segment value="all">
-                    <ion-segment-button value="all">All</ion-segment-button>
-                    <ion-segment-button value="favorites">Favorites</ion-segment-button>
+                    <ion-segment-button value="all">
+                      <ion-label>All</ion-label>
+                    </ion-segment-button>
+                    <ion-segment-button value="favorites">
+                      <ion-label>Favorites</ion-label>
+                    </ion-segment-button>
                   </ion-segment>
 
                   <ion-segment color="primary" value="all">
-                    <ion-segment-button value="all">All</ion-segment-button>
-                    <ion-segment-button value="favorites">Favorites</ion-segment-button>
+                    <ion-segment-button value="all">
+                      <ion-label>All</ion-label>
+                    </ion-segment-button>
+                    <ion-segment-button value="favorites">
+                      <ion-label>Favorites</ion-label>
+                    </ion-segment-button>
                   </ion-segment>
 
                   <ion-segment color="secondary" value="all">
-                    <ion-segment-button value="all">All</ion-segment-button>
-                    <ion-segment-button value="favorites">Favorites</ion-segment-button>
+                    <ion-segment-button value="all">
+                      <ion-label>All</ion-label>
+                    </ion-segment-button>
+                    <ion-segment-button value="favorites">
+                      <ion-label>Favorites</ion-label>
+                    </ion-segment-button>
                   </ion-segment>
 
                   <ion-segment color="success" value="all">
-                    <ion-segment-button value="all">All</ion-segment-button>
-                    <ion-segment-button value="favorites">Favorites</ion-segment-button>
+                    <ion-segment-button value="all">
+                      <ion-label>All</ion-label>
+                    </ion-segment-button>
+                    <ion-segment-button value="favorites">
+                      <ion-label>Favorites</ion-label>
+                    </ion-segment-button>
                   </ion-segment>
 
                   <ion-segment color="light" value="all">
-                    <ion-segment-button value="all">All</ion-segment-button>
-                    <ion-segment-button value="favorites">Favorites</ion-segment-button>
+                    <ion-segment-button value="all">
+                      <ion-label>All</ion-label>
+                    </ion-segment-button>
+                    <ion-segment-button value="favorites">
+                      <ion-label>Favorites</ion-label>
+                    </ion-segment-button>
                   </ion-segment>
 
                   <ion-segment color="medium" value="all">
-                    <ion-segment-button value="all">All</ion-segment-button>
-                    <ion-segment-button value="favorites">Favorites</ion-segment-button>
+                    <ion-segment-button value="all">
+                      <ion-label>All</ion-label>
+                    </ion-segment-button>
+                    <ion-segment-button value="favorites">
+                      <ion-label>Favorites</ion-label>
+                    </ion-segment-button>
                   </ion-segment>
                 </p>
               </section>