diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss
index e15b14ea02..046c1e3598 100755
--- a/core/src/components/fab-button/fab-button.scss
+++ b/core/src/components/fab-button/fab-button.scss
@@ -15,6 +15,8 @@
   --padding-top: calc((#{$fab-size} - var(--size)) / 2);
   --padding-bottom: calc((#{$fab-size} - var(--size)) / 2);
 
+  display: block;
+
   color: #{current-color(contrast)};
 
   font-size: 14px;
@@ -27,6 +29,9 @@
   font-kerning: none;
 }
 
+:host(.fab-button-disabled) {
+  pointer-events: none;
+}
 
 :host(.activated) {
   --background: #{current-color(tint)};
diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
index 021a719e4b..4cbe7c2763 100755
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -81,6 +81,7 @@ export class FabButton {
       class: {
         ...createColorClasses(this.color),
         ...this.getFabClassMap(),
+        'fab-button-disabled': this.disabled,
         'fab-button-translucent': this.translucent
       }
     };
diff --git a/core/src/components/fab/test/basic/index.html b/core/src/components/fab/test/basic/index.html
index fd940b71b0..3f939d720b 100644
--- a/core/src/components/fab/test/basic/index.html
+++ b/core/src/components/fab/test/basic/index.html
@@ -24,7 +24,7 @@
 
       <pre id="log" style="right:10px; bottom:50px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.24);" slot="fixed">log</pre>
       <ion-button>Test</ion-button>
-      <ion-fab-button disabled>FAB</ion-fab-button>
+      <ion-fab-button disabled onclick="throw 'no clickable'">FAB</ion-fab-button>
 
       <ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
         <ion-fab-button onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight">