diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index cd524d9901..c19acfdc64 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -235,7 +235,7 @@ export class ActionSheet implements OverlayInterface {
               </div>
             }
             {buttons.map(b =>
-              <button type="button" ion-activable class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
+              <button type="button" ion-activatable class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
                 <span class="action-sheet-button-inner">
                   {b.icon && <ion-icon icon={b.icon} lazy={false} class="action-sheet-icon" />}
                   {b.text}
@@ -247,7 +247,7 @@ export class ActionSheet implements OverlayInterface {
           {cancelButton &&
             <div class="action-sheet-group action-sheet-group-cancel">
               <button
-                ion-activable
+                ion-activatable
                 type="button"
                 class={buttonClass(cancelButton)}
                 onClick={() => this.buttonClick(cancelButton)}
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index d1f18391e4..0d738be414 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -424,7 +424,7 @@ export class Alert implements OverlayInterface {
     return (
       <div class={alertButtonGroupClass}>
         {buttons.map(button =>
-          <button type="button" ion-activable class={buttonClass(button)} tabIndex={0} onClick={() => this.buttonClick(button)}>
+          <button type="button" ion-activatable class={buttonClass(button)} tabIndex={0} onClick={() => this.buttonClick(button)}>
             <span class="alert-button-inner">
               {button.text}
             </span>
diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index 0d2fec9fe3..9610515f5d 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -65,7 +65,7 @@ export class BackButton {
         'button': true,
         'show-back-button': showBackButton
       },
-      'ion-activable': true,
+      'ion-activatable': true,
     };
   }
 
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 2b6090c0a3..8fcae49e94 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -149,6 +149,7 @@ export class Button {
     const { buttonType, color, expand, fill, mode, shape, size, strong } = this;
 
     return {
+      'ion-activatable': true,
       class: {
         ...createColorClasses(color),
         ...getButtonClassMap(buttonType, mode),
@@ -158,8 +159,7 @@ export class Button {
         ...getButtonTypeClassMap(buttonType, strong ? 'strong' : undefined, mode),
         ...getButtonTypeClassMap(buttonType, fill, mode),
         'focused': this.keyFocus,
-      },
-      'ion-activable': true,
+      }
     };
   }
 
diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
index 606f86f554..f0dac8beed 100755
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -75,9 +75,8 @@ export class FabButton {
   }
 
   hostData() {
-
     return {
-      'ion-activable': !this.disabled,
+      'ion-activatable': true,
       class: {
         ...createColorClasses(this.color),
         ...this.getFabClassMap(),
@@ -102,7 +101,7 @@ export class FabButton {
         <span class="fab-button-inner">
           <slot></slot>
         </span>
-        {this.mode === 'md' && <ion-ripple-effect />}
+        {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
       </TagType>
     );
   }
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index 47c08fdfc2..047393831e 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -126,7 +126,7 @@ export class Item {
     });
 
     return {
-      'ion-activable': this.isClickable(),
+      'ion-activatable': this.isClickable(),
       class: {
         ...childStyles,
         ...createColorClasses(this.color),
diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx
index c611cba77e..eb442802c0 100644
--- a/core/src/components/picker/picker.tsx
+++ b/core/src/components/picker/picker.tsx
@@ -257,7 +257,7 @@ export class Picker implements OverlayInterface {
             <div class={buttonWrapperClass(b)}>
               <button
                 type="button"
-                ion-activable
+                ion-activatable
                 onClick={() => this.buttonClick(b)}
                 class={buttonClass(b)}
               >
diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx
index 384cbd0e26..58d8c7b193 100644
--- a/core/src/components/segment-button/segment-button.tsx
+++ b/core/src/components/segment-button/segment-button.tsx
@@ -57,12 +57,12 @@ export class SegmentButton {
   hostData() {
     const { disabled, checked, color } = this;
     return {
+      'ion-activatable': true,
       class: {
         ...createColorClasses(color),
         'segment-button-disabled': disabled,
         'segment-button-checked': checked,
-      },
-      'ion-activable': true,
+      }
     };
   }
 
diff --git a/core/src/components/tabbar/tabbar.tsx b/core/src/components/tabbar/tabbar.tsx
index fd0a3e3851..d62a363f79 100644
--- a/core/src/components/tabbar/tabbar.tsx
+++ b/core/src/components/tabbar/tabbar.tsx
@@ -112,7 +112,7 @@ export class Tabbar {
     return (
       <a
         role="tab"
-        ion-activable
+        ion-activatable
         aria-selected={selected ? 'true' : null}
         href={href || '#'}
         class={{
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index fea89dc23e..a82417731a 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -194,7 +194,7 @@ export class Toast implements OverlayInterface {
             <div class="toast-message">{this.message}</div>
           }
           {this.showCloseButton &&
-            <ion-button fill="clear" color="light" ion-activable class="toast-button" onClick={() => this.dismiss(undefined, 'cancel')}>
+            <ion-button fill="clear" color="light" ion-activatable class="toast-button" onClick={() => this.dismiss(undefined, 'cancel')}>
               {this.closeButtonText || 'Close'}
             </ion-button>
           }
diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts
index 88bafe1816..4f5a4dfbfa 100644
--- a/core/src/interface.d.ts
+++ b/core/src/interface.d.ts
@@ -54,7 +54,7 @@ declare global {
     // for ion-menu and ion-split-pane
     main?: boolean;
     tappable?: boolean;
-    'ion-activable'?: boolean;
+    'ion-activatable'?: boolean;
 
     padding?: boolean;
     ['padding-top']?: boolean;
diff --git a/core/src/utils/tap-click.ts b/core/src/utils/tap-click.ts
index dd6f689920..dc2095dab6 100644
--- a/core/src/utils/tap-click.ts
+++ b/core/src/utils/tap-click.ts
@@ -149,12 +149,12 @@ function getActivatableTarget(ev: any): any {
     const path = ev.composedPath() as HTMLElement[];
     for (let i = 0; i < path.length - 2; i++) {
       const el = path[i];
-      if (el.hasAttribute && el.hasAttribute('ion-activable')) {
+      if (el.hasAttribute && el.hasAttribute('ion-activatable')) {
         return el;
       }
     }
   } else {
-    return ev.target.closest('[ion-activable]');
+    return ev.target.closest('[ion-activatable]');
   }
 }