diff --git a/src/state/haptic-mixin.ts b/src/state/haptic-mixin.ts
new file mode 100644
index 0000000000..58bd47129a
--- /dev/null
+++ b/src/state/haptic-mixin.ts
@@ -0,0 +1,28 @@
+import { Constructor, LitElement, PropertyValues } from "lit-element";
+import { HassBaseEl } from "./hass-base-mixin";
+
+import { HapticType } from "../data/haptics";
+
+const hapticPatterns = {
+  success: [50, 50, 50],
+  warning: [100, 50, 100],
+  failure: [200, 100, 200],
+  light: [50],
+  medium: [100],
+  heavy: [200],
+  selection: [20],
+};
+
+const handleHaptic = (hapticType: HapticType) => {
+  navigator.vibrate(hapticPatterns[hapticType]);
+};
+
+export const hapticMixin = (superClass: Constructor<LitElement & HassBaseEl>) =>
+  class extends superClass {
+    protected firstUpdated(changedProps: PropertyValues) {
+      super.firstUpdated(changedProps);
+      if (navigator.vibrate) {
+        window.addEventListener("haptic", (e) => handleHaptic(e.detail));
+      }
+    }
+  };
diff --git a/src/state/hass-element.ts b/src/state/hass-element.ts
index da67ba1385..c225ef9224 100644
--- a/src/state/hass-element.ts
+++ b/src/state/hass-element.ts
@@ -9,6 +9,7 @@ import { dialogManagerMixin } from "./dialog-manager-mixin";
 import { connectionMixin } from "./connection-mixin";
 import NotificationMixin from "./notification-mixin";
 import DisconnectToastMixin from "./disconnect-toast-mixin";
+import { hapticMixin } from "./haptic-mixin";
 import { urlSyncMixin } from "./url-sync-mixin";
 import { LitElement } from "lit-element";
 
@@ -27,4 +28,5 @@ export class HassElement extends ext(HassBaseMixin(LitElement), [
   dialogManagerMixin,
   urlSyncMixin,
   ZHADialogMixin,
+  hapticMixin,
 ]) {}