diff --git a/docs/ui/makeup-menu-button/index.js b/docs/ui/makeup-menu-button/index.js
index 441a1207..f3e2d761 100644
--- a/docs/ui/makeup-menu-button/index.js
+++ b/docs/ui/makeup-menu-button/index.js
@@ -32,8 +32,8 @@ window.onload = function () {
       menuItemButtonAriaLabelSelector,
     });
 
-    widget.menu.el.addEventListener("makeup-menu-select", (e) => console.log(e.type, e.detail));
-    widget.menu.el.addEventListener("makeup-menu-change", (e) => console.log(e.type, e.detail));
-    widget.menu.el.addEventListener("makeup-menu-button-mutation", (e) => console.log(e.type, e.detail));
+    el.addEventListener("makeup-menu-button-select", (e) => console.log(e.type, e.detail));
+    el.addEventListener("makeup-menu-button-change", (e) => console.log(e.type, e.detail));
+    el.addEventListener("makeup-menu-button-mutation", (e) => console.log(e.type, e.detail));
   });
 };
diff --git a/packages/ui/makeup-menu-button/src/index.js b/packages/ui/makeup-menu-button/src/index.js
index 844a438a..46d27504 100644
--- a/packages/ui/makeup-menu-button/src/index.js
+++ b/packages/ui/makeup-menu-button/src/index.js
@@ -123,6 +123,22 @@ function _onMenuItemSelect(e) {
   const widget = this;
   const { el } = e.detail;
 
+  // Re-dispatch the menu event as a menu-button event
+  const eventTypeMap = {
+    "makeup-menu-select": "makeup-menu-button-select",
+    "makeup-menu-change": "makeup-menu-button-change",
+  };
+  const eventName = eventTypeMap[e.type];
+
+  if (eventName) {
+    this.el.dispatchEvent(
+      new CustomEvent(eventName, {
+        detail: e.detail,
+        bubbles: true,
+      }),
+    );
+  }
+
   setTimeout(function () {
     widget._expander.expanded = false;
     widget._buttonEl.focus();