diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx
index a1cf1af5d5..30dadfc9ad 100644
--- a/core/src/components/segment-button/segment-button.tsx
+++ b/core/src/components/segment-button/segment-button.tsx
@@ -38,7 +38,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
   /**
    * If `true`, the user cannot interact with the segment button.
    */
-  @Prop() disabled = false;
+  @Prop({ mutable: true }) disabled = false;
 
   /**
    * Set the layout of the text and icon in the segment.
@@ -92,8 +92,14 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
   };
 
   private updateState = () => {
-    if (this.segmentEl) {
-      this.checked = this.segmentEl.value === this.value;
+    const { segmentEl } = this;
+
+    if (segmentEl) {
+      this.checked = segmentEl.value === this.value;
+
+      if (segmentEl.disabled) {
+        this.disabled = true;
+      }
     }
   };
 
diff --git a/core/src/components/segment/test/segment.spec.ts b/core/src/components/segment/test/segment.spec.ts
new file mode 100644
index 0000000000..fe3a55343c
--- /dev/null
+++ b/core/src/components/segment/test/segment.spec.ts
@@ -0,0 +1,18 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { SegmentButton } from '../../segment-button/segment-button';
+import { Segment } from '../segment';
+
+it('should disable segment buttons added to disabled segment async', async () => {
+  const page = await newSpecPage({
+    components: [Segment, SegmentButton],
+    html: `<ion-segment disabled="true"></ion-segment>`,
+  });
+
+  const segment = page.body.querySelector('ion-segment');
+  segment.innerHTML = `<ion-segment-button>Segment Button</ion-segment-button>`;
+  await page.waitForChanges();
+
+  const segmentButton = page.body.querySelector('ion-segment-button');
+  expect(segmentButton.disabled).toBe(true);
+});