diff --git a/packages/core/src/components/bal-button/bal-button.tsx b/packages/core/src/components/bal-button/bal-button.tsx
index cfd18e75b..6ede6921c 100644
--- a/packages/core/src/components/bal-button/bal-button.tsx
+++ b/packages/core/src/components/bal-button/bal-button.tsx
@@ -8,7 +8,7 @@ import {
   ComponentInterface,
   Element,
   State,
-  Listen,
+  Listen, Watch,
 } from '@stencil/core'
 import { Attributes, inheritAttributes } from '../../utils/attributes'
 import { ariaBooleanToString } from '../../utils/aria'
@@ -118,7 +118,7 @@ export class Button implements ComponentInterface {
   /**
    * If `true` the button is a popup.
    */
-  @Prop() balPopup = undefined
+  @Prop() balPopup: boolean|undefined = undefined
 
   /**
    * Name of the left button icon
@@ -185,11 +185,6 @@ export class Button implements ComponentInterface {
 
   componentDidLoad(): void {
     rOnLoad(() => (this.isLargestContentPaintDone = true))
-    if (this.el.getAttribute('bal-popup') && !this.aria?.haspopup) {
-      this.aria = {
-        haspopup: 'true',
-      }
-    }
   }
 
   componentWillLoad() {
@@ -313,7 +308,7 @@ export class Button implements ComponentInterface {
       'aria-label':
         this.aria?.label || this.inheritAttributes['aria-label'] || this.aria?.title || this.inheritAttributes['title'],
       'aria-controls': this.aria?.controls || this.inheritAttributes['aria-controls'],
-      'aria-haspopup': this.aria?.haspopup || this.inheritAttributes['aria-haspopup'],
+      'aria-haspopup':  ariaBooleanToString(this.balPopup) || this.inheritAttributes['aria-haspopup'],
     }
 
     return (