diff --git a/packages/web-components/src/button/button.stories.ts b/packages/web-components/src/button/button.stories.ts
index 6294abf3e34dd9..64836ed9efd044 100644
--- a/packages/web-components/src/button/button.stories.ts
+++ b/packages/web-components/src/button/button.stories.ts
@@ -225,5 +225,5 @@ export const Popover: Story<FluentButton> = renderComponent(html<StoryArgs<Fluen
   <fluent-button popovertarget="foo" popovertargetaction="show">Show Popover</fluent-button>
   <fluent-button popovertarget="foo" popovertargetaction="hide">Hide Popover</fluent-button>
   <fluent-button popovertarget="foo" popovertargetaction="toggle">Toggle Popover</fluent-button>
-  <div id="foo" popover open>This is a popover</div>
+  <div id="foo" popover>This is a popover</div>
 `);
diff --git a/packages/web-components/src/button/button.ts b/packages/web-components/src/button/button.ts
index 962dcbdce483e4..caa2dc98d097a0 100644
--- a/packages/web-components/src/button/button.ts
+++ b/packages/web-components/src/button/button.ts
@@ -307,7 +307,7 @@ export class BaseButton extends FASTElement {
         case 'toggle':
         default:
           // @ts-expect-error - Baseline 2024
-          this.popoverTargetElement?.togglePopover(!this.popoverOpen);
+          this.popoverTargetElement?.togglePopover(this.popoverTargetElement?.matches(':popover-open'));
           break;
       }
     }