diff --git a/src/button/Button.stories.ts b/src/button/Button.stories.ts
index b663ced..6036ebd 100644
--- a/src/button/Button.stories.ts
+++ b/src/button/Button.stories.ts
@@ -21,21 +21,11 @@ export const Template: StoryObj = {
     },
   },
   render: (args) => {
-    let buttonRendered = false;
-    const handleClick = () => {
-      // Function required as the click event is triggered once on render
-      if (buttonRendered) {
-        alert("Button Clicked");
-        return;
-      }
-      buttonRendered = true;
-    };
-
     return html`
       <hot-button
         intent=${args.intent}
         ?disabled=${args.disabled}
-        @click=${handleClick}
+        @click=${() => {alert("Button Clicked")}}
       >
         Button
       </hot-button>
diff --git a/src/button/Button.ts b/src/button/Button.ts
index b504932..f332a06 100644
--- a/src/button/Button.ts
+++ b/src/button/Button.ts
@@ -47,12 +47,16 @@ export class button extends LitElement {
         disabled: this.disabled,
       })}
       ?disabled=${this.disabled}
+      @click=${(e: MouseEvent) => {this._handleClick(e)}}
     >
       <slot></slot>
     </button>`;
   }
 
-  updated(changedProperties) {
+  private _handleClick(e: MouseEvent) {
+    // As the original event is also named 'click'
+    // stop propagation of the original event
+    e.stopPropagation();
     this.dispatchEvent(new Event("click"));
   }
 }