From 8ae015f2d8463658ae605686dc68f70c15cf877a Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Wed, 6 Aug 2025 16:16:17 -0400
Subject: [PATCH] [CL-372] Add required type attr to buttons in stories
 (#15892)

---
 .../src/anon-layout/anon-layout.stories.ts    |  2 +-
 .../src/async-actions/standalone.stories.ts   |  4 +-
 libs/components/src/badge/badge.stories.ts    | 58 +++++++++----------
 libs/components/src/banner/banner.stories.ts  |  4 +-
 libs/components/src/button/button.stories.ts  | 44 +++++++-------
 .../src/dialog/dialog/dialog.stories.ts       | 28 ++++-----
 .../simple-dialog/simple-dialog.stories.ts    | 30 +++++-----
 .../src/form-field/form-field.stories.ts      | 22 +++----
 .../src/icon-button/icon-button.stories.ts    |  6 +-
 libs/components/src/item/item.stories.ts      | 22 +++----
 libs/components/src/link/link.stories.ts      | 16 ++---
 libs/components/src/menu/menu.stories.ts      |  2 +-
 .../src/navigation/nav-item.stories.ts        |  4 +-
 .../components/src/popover/popover.stories.ts |  2 +-
 .../components/src/section/section.stories.ts | 12 ++--
 libs/components/src/tabs/tabs.stories.ts      |  4 +-
 16 files changed, 132 insertions(+), 128 deletions(-)

diff --git a/libs/components/src/anon-layout/anon-layout.stories.ts b/libs/components/src/anon-layout/anon-layout.stories.ts
index 9abc84d2860..339f76ec06b 100644
--- a/libs/components/src/anon-layout/anon-layout.stories.ts
+++ b/libs/components/src/anon-layout/anon-layout.stories.ts
@@ -98,7 +98,7 @@ export default {
             <div class="tw-font-bold tw-mb-2">
               Secondary Projected Content (optional)
             </div>
-            <button bitButton>Perform Action</button>
+            <button type="button" bitButton>Perform Action</button>
           </div>
         </auth-anon-layout>
       `,
diff --git a/libs/components/src/async-actions/standalone.stories.ts b/libs/components/src/async-actions/standalone.stories.ts
index 07a1e2a98a2..1ed6f6c5a59 100644
--- a/libs/components/src/async-actions/standalone.stories.ts
+++ b/libs/components/src/async-actions/standalone.stories.ts
@@ -13,10 +13,10 @@ import { AsyncActionsModule } from "./async-actions.module";
 import { BitActionDirective } from "./bit-action.directive";
 
 const template = /*html*/ `
-  <button bitButton buttonType="primary" [bitAction]="action" class="tw-me-2">
+  <button type="button" bitButton buttonType="primary" [bitAction]="action" class="tw-me-2">
     Perform action {{ statusEmoji }}
   </button>
-  <button bitIconButton="bwi-trash" buttonType="danger" [bitAction]="action"></button>`;
+  <button type="button" bitIconButton="bwi-trash" buttonType="danger" [bitAction]="action"></button>`;
 
 @Component({
   template,
diff --git a/libs/components/src/badge/badge.stories.ts b/libs/components/src/badge/badge.stories.ts
index a151547ef6a..0e5f44cc5c0 100644
--- a/libs/components/src/badge/badge.stories.ts
+++ b/libs/components/src/badge/badge.stories.ts
@@ -47,7 +47,7 @@ export const Primary: Story = {
           <span class="tw-text-main">link </span><a href="#" bitBadge ${formatArgsForCodeSnippet<BadgeComponent>(args)}>Badge</a>
         </div>
         <div class="tw-flex tw-items-center tw-gap-2">
-          <span class="tw-text-main">button </span><button bitBadge ${formatArgsForCodeSnippet<BadgeComponent>(args)}>Badge</button>
+          <span class="tw-text-main">button </span><button type="button" bitBadge ${formatArgsForCodeSnippet<BadgeComponent>(args)}>Badge</button>
         </div>
       </div>
     `,
@@ -108,40 +108,40 @@ export const VariantsAndInteractionStates: Story = {
     props: args,
     template: /*html*/ `
       <span class="tw-text-main tw-mx-1">Default</span>
-      <button class="tw-mx-1" bitBadge variant="primary" [truncate]="truncate">Primary</button>
-      <button class="tw-mx-1" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
-      <button class="tw-mx-1" bitBadge variant="success" [truncate]="truncate">Success</button>
-      <button class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
-      <button class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
-      <button class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
-      <button class="tw-mx-1" bitBadge variant="notification" [truncate]="truncate">Notification</button>
+      <button type="button" class="tw-mx-1" bitBadge variant="primary" [truncate]="truncate">Primary</button>
+      <button type="button" class="tw-mx-1" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
+      <button type="button" class="tw-mx-1" bitBadge variant="success" [truncate]="truncate">Success</button>
+      <button type="button" class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
+      <button type="button" class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
+      <button type="button" class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
+      <button type="button" class="tw-mx-1" bitBadge variant="notification" [truncate]="truncate">Notification</button>
       <br/><br/>
       <span class="tw-text-main tw-mx-1">Hover</span>
-      <button class="tw-mx-1 tw-test-hover" bitBadge variant="primary" [truncate]="truncate">Primary</button>
-      <button class="tw-mx-1 tw-test-hover" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
-      <button class="tw-mx-1 tw-test-hover" bitBadge variant="success" [truncate]="truncate">Success</button>
-      <button class="tw-mx-1 tw-test-hover" bitBadge variant="danger" [truncate]="truncate">Danger</button>
-      <button class="tw-mx-1 tw-test-hover" bitBadge variant="warning" [truncate]="truncate">Warning</button>
-      <button class="tw-mx-1 tw-test-hover" bitBadge variant="info" [truncate]="truncate">Info</button>
-      <button class="tw-mx-1 tw-test-hover" bitBadge variant="notification" [truncate]="truncate">Notification</button>
+      <button type="button" class="tw-mx-1 tw-test-hover" bitBadge variant="primary" [truncate]="truncate">Primary</button>
+      <button type="button" class="tw-mx-1 tw-test-hover" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
+      <button type="button" class="tw-mx-1 tw-test-hover" bitBadge variant="success" [truncate]="truncate">Success</button>
+      <button type="button" class="tw-mx-1 tw-test-hover" bitBadge variant="danger" [truncate]="truncate">Danger</button>
+      <button type="button" class="tw-mx-1 tw-test-hover" bitBadge variant="warning" [truncate]="truncate">Warning</button>
+      <button type="button" class="tw-mx-1 tw-test-hover" bitBadge variant="info" [truncate]="truncate">Info</button>
+      <button type="button" class="tw-mx-1 tw-test-hover" bitBadge variant="notification" [truncate]="truncate">Notification</button>
       <br/><br/>
       <span class="tw-text-main tw-mx-1">Focus Visible</span>
-      <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="primary" [truncate]="truncate">Primary</button>
-      <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
-      <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="success" [truncate]="truncate">Success</button>
-      <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="danger" [truncate]="truncate">Danger</button>
-      <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="warning" [truncate]="truncate">Warning</button>
-      <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="info" [truncate]="truncate">Info</button>
-      <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="notification" [truncate]="truncate">Notification</button>
+      <button type="button" class="tw-mx-1 tw-test-focus-visible" bitBadge variant="primary" [truncate]="truncate">Primary</button>
+      <button type="button" class="tw-mx-1 tw-test-focus-visible" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
+      <button type="button" class="tw-mx-1 tw-test-focus-visible" bitBadge variant="success" [truncate]="truncate">Success</button>
+      <button type="button" class="tw-mx-1 tw-test-focus-visible" bitBadge variant="danger" [truncate]="truncate">Danger</button>
+      <button type="button" class="tw-mx-1 tw-test-focus-visible" bitBadge variant="warning" [truncate]="truncate">Warning</button>
+      <button type="button" class="tw-mx-1 tw-test-focus-visible" bitBadge variant="info" [truncate]="truncate">Info</button>
+      <button type="button" class="tw-mx-1 tw-test-focus-visible" bitBadge variant="notification" [truncate]="truncate">Notification</button>
       <br/><br/>
       <span class="tw-text-main tw-mx-1">Disabled</span>
-      <button disabled class="tw-mx-1" bitBadge variant="primary" [truncate]="truncate">Primary</button>
-      <button disabled class="tw-mx-1" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
-      <button disabled class="tw-mx-1" bitBadge variant="success" [truncate]="truncate">Success</button>
-      <button disabled class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
-      <button disabled class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
-      <button disabled class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
-      <button disabled class="tw-mx-1" bitBadge variant="notification" [truncate]="truncate">Notification</button>
+      <button type="button" disabled class="tw-mx-1" bitBadge variant="primary" [truncate]="truncate">Primary</button>
+      <button type="button" disabled class="tw-mx-1" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
+      <button type="button" disabled class="tw-mx-1" bitBadge variant="success" [truncate]="truncate">Success</button>
+      <button type="button" disabled class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
+      <button type="button" disabled class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
+      <button type="button" disabled class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
+      <button type="button" disabled class="tw-mx-1" bitBadge variant="notification" [truncate]="truncate">Notification</button>
     `,
   }),
 };
diff --git a/libs/components/src/banner/banner.stories.ts b/libs/components/src/banner/banner.stories.ts
index 8338c9240b9..a7649a28228 100644
--- a/libs/components/src/banner/banner.stories.ts
+++ b/libs/components/src/banner/banner.stories.ts
@@ -49,10 +49,10 @@ export const Base: Story = {
   render: (args) => {
     return {
       props: args,
-      template: `
+      template: /*html*/ `
         <bit-banner ${formatArgsForCodeSnippet<BannerComponent>(args)}>
           Content Really Long Text Lorem Ipsum Ipsum Ipsum
-          <button bitLink linkType="secondary">Button</button>
+          <button type="button" bitLink linkType="secondary">Button</button>
         </bit-banner>
       `,
     };
diff --git a/libs/components/src/button/button.stories.ts b/libs/components/src/button/button.stories.ts
index 29a9e367fcc..180f5cb4aa9 100644
--- a/libs/components/src/button/button.stories.ts
+++ b/libs/components/src/button/button.stories.ts
@@ -31,7 +31,7 @@ export const Default: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <button bitButton ${formatArgsForCodeSnippet<ButtonComponent>(args)}>Button</button>
+      <button type="button" bitButton ${formatArgsForCodeSnippet<ButtonComponent>(args)}>Button</button>
     `,
   }),
   args: {
@@ -58,9 +58,9 @@ export const Small: Story = {
     props: args,
     template: /*html*/ `
     <div class="tw-flex tw-gap-4 tw-mb-6 tw-items-center">
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'primary'" [size]="size" [block]="block">Primary small</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'secondary'" [size]="size" [block]="block">Secondary small</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'danger'" [size]="size" [block]="block">Danger small</button>
+      <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'primary'" [size]="size" [block]="block">Primary small</button>
+      <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'secondary'" [size]="size" [block]="block">Secondary small</button>
+      <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'danger'" [size]="size" [block]="block">Danger small</button>
     </div>
     `,
   }),
@@ -86,15 +86,15 @@ export const Disabled: Story = {
 export const DisabledWithAttribute: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       @if (disabled) {
-        <button bitButton disabled [loading]="loading" [block]="block" buttonType="primary" class="tw-me-2">Primary</button>
-        <button bitButton disabled [loading]="loading" [block]="block" buttonType="secondary" class="tw-me-2">Secondary</button>
-        <button bitButton disabled [loading]="loading" [block]="block" buttonType="danger" class="tw-me-2">Danger</button>
+        <button type="button" bitButton disabled [loading]="loading" [block]="block" buttonType="primary" class="tw-me-2">Primary</button>
+        <button type="button" bitButton disabled [loading]="loading" [block]="block" buttonType="secondary" class="tw-me-2">Secondary</button>
+        <button type="button" bitButton disabled [loading]="loading" [block]="block" buttonType="danger" class="tw-me-2">Danger</button>
       } @else {
-        <button bitButton [loading]="loading" [block]="block" buttonType="primary" class="tw-me-2">Primary</button>
-        <button bitButton [loading]="loading" [block]="block" buttonType="secondary" class="tw-me-2">Secondary</button>
-        <button bitButton [loading]="loading" [block]="block" buttonType="danger" class="tw-me-2">Danger</button>
+        <button type="button" bitButton [loading]="loading" [block]="block" buttonType="primary" class="tw-me-2">Primary</button>
+        <button type="button" bitButton [loading]="loading" [block]="block" buttonType="secondary" class="tw-me-2">Secondary</button>
+        <button type="button" bitButton [loading]="loading" [block]="block" buttonType="danger" class="tw-me-2">Danger</button>
       }
     `,
   }),
@@ -107,12 +107,12 @@ export const DisabledWithAttribute: Story = {
 export const Block: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <span class="tw-flex">
-        <button bitButton [buttonType]="buttonType" [block]="block">[block]="true" Button</button>
+        <button type="button" bitButton [buttonType]="buttonType" [block]="block">[block]="true" Button</button>
         <a bitButton [buttonType]="buttonType" [block]="block" href="#" class="tw-ms-2">[block]="true" Link</a>
 
-        <button bitButton [buttonType]="buttonType" block class="tw-ms-2">block Button</button>
+        <button type="button" bitButton [buttonType]="buttonType" block class="tw-ms-2">block Button</button>
         <a bitButton [buttonType]="buttonType" block href="#" class="tw-ms-2">block Link</a>
       </span>
     `,
@@ -125,16 +125,16 @@ export const Block: Story = {
 export const WithIcon: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <span class="tw-flex tw-gap-8">
         <div>
-          <button bitButton [buttonType]="buttonType" [block]="block">
+          <button type="button" bitButton [buttonType]="buttonType" [block]="block">
             <i class="bwi bwi-plus tw-me-2"></i>
             Button label
           </button>
         </div>
         <div>
-          <button bitButton [buttonType]="buttonType" [block]="block">
+          <button type="button" bitButton [buttonType]="buttonType" [block]="block">
             Button label
             <i class="bwi bwi-plus tw-ms-2"></i>
           </button>
@@ -149,11 +149,11 @@ export const InteractionStates: Story = {
     props: args,
     template: /*html*/ `
     <div class="tw-flex tw-gap-4 tw-mb-6 tw-items-center">
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block">Button</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
+      <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block">Button</button>
+      <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
+      <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+      <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+      <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
     </div>
     <div class="tw-flex tw-gap-4 tw-items-center">
       <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block">Anchor</a>
diff --git a/libs/components/src/dialog/dialog/dialog.stories.ts b/libs/components/src/dialog/dialog/dialog.stories.ts
index bb8b2450de2..7cf8b774a23 100644
--- a/libs/components/src/dialog/dialog/dialog.stories.ts
+++ b/libs/components/src/dialog/dialog/dialog.stories.ts
@@ -78,16 +78,17 @@ type Story = StoryObj<DialogComponent & { title: string }>;
 export const Default: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-dialog [dialogSize]="dialogSize" [title]="title" [subtitle]="subtitle" [loading]="loading" [disablePadding]="disablePadding">
         <ng-container bitDialogTitle>
           <span bitBadge variant="success">Foobar</span>
         </ng-container>
         <ng-container bitDialogContent>Dialog body text goes here.</ng-container>
         <ng-container bitDialogFooter>
-          <button bitButton buttonType="primary" [disabled]="loading">Save</button>
-          <button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
+          <button type="button" bitButton buttonType="primary" [disabled]="loading">Save</button>
+          <button type="button" bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
           <button
+            type="button"
             [disabled]="loading"
             class="tw-ms-auto"
             bitIconButton="bwi-trash"
@@ -142,7 +143,7 @@ export const Loading: Story = {
 export const ScrollingContent: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-dialog title="Scrolling Example" [dialogSize]="dialogSize" [loading]="loading" [disablePadding]="disablePadding">
         <span bitDialogContent>
           Dialog body text goes here.<br />
@@ -152,8 +153,8 @@ export const ScrollingContent: Story = {
           end of sequence!
         </span>
         <ng-container bitDialogFooter>
-          <button bitButton buttonType="primary" [disabled]="loading">Save</button>
-          <button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
+          <button type="button" bitButton buttonType="primary" [disabled]="loading">Save</button>
+          <button type="button" bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
         </ng-container>
       </bit-dialog>
     `,
@@ -166,7 +167,7 @@ export const ScrollingContent: Story = {
 export const TabContent: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-dialog title="Tab Content Example" [dialogSize]="dialogSize" [disablePadding]="disablePadding">
         <span bitDialogContent>
           <bit-tab-group>
@@ -176,8 +177,8 @@ export const TabContent: Story = {
           </bit-tab-group>
         </span>
         <ng-container bitDialogFooter>
-          <button bitButton buttonType="primary" [disabled]="loading">Save</button>
-          <button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
+          <button type="button" bitButton buttonType="primary" [disabled]="loading">Save</button>
+          <button type="button" bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
         </ng-container>
       </bit-dialog>
     `,
@@ -211,7 +212,7 @@ export const WithCards: Story = {
               <h2 bitTypography="h6">
                 Foo
               </h2>
-              <button bitIconButton="bwi-star" size="small" slot="end"></button>
+              <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
             </bit-section-header>
             <bit-card>
               <bit-form-field>
@@ -231,7 +232,7 @@ export const WithCards: Story = {
               <h2 bitTypography="h6">
                 Bar
               </h2>
-              <button bitIconButton="bwi-star" size="small" slot="end"></button>
+              <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
             </bit-section-header>
             <bit-card>
               <bit-form-field>
@@ -248,9 +249,10 @@ export const WithCards: Story = {
           </bit-section>
         </ng-container>
         <ng-container bitDialogFooter>
-          <button bitButton buttonType="primary" [disabled]="loading">Save</button>
-          <button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
+          <button type="button" bitButton buttonType="primary" [disabled]="loading">Save</button>
+          <button type="button" bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
           <button
+            type="button"
             [disabled]="loading"
             class="tw-ms-auto"
             bitIconButton="bwi-trash"
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts b/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
index 13618fdeb5f..a344a01ee2c 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
@@ -27,13 +27,13 @@ type Story = StoryObj<SimpleDialogComponent & { useDefaultIcon: boolean }>;
 export const Default: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-simple-dialog>
         <span bitDialogTitle>Alert Dialog</span>
         <span bitDialogContent>Message Content</span>
         <ng-container bitDialogFooter>
-          <button bitButton buttonType="primary">Yes</button>
-          <button bitButton buttonType="secondary">No</button>
+          <button type="button" bitButton buttonType="primary">Yes</button>
+          <button type="button" bitButton buttonType="secondary">No</button>
         </ng-container>
       </bit-simple-dialog>
     `,
@@ -43,14 +43,14 @@ export const Default: Story = {
 export const CustomIcon: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-simple-dialog>
         <i bitDialogIcon class="bwi bwi-star tw-text-3xl tw-text-success" aria-hidden="true"></i>
         <span bitDialogTitle>Premium Subscription Available</span>
         <span bitDialogContent> Message Content</span>
         <ng-container bitDialogFooter>
-          <button bitButton buttonType="primary">Yes</button>
-          <button bitButton buttonType="secondary">No</button>
+          <button type="button" bitButton buttonType="primary">Yes</button>
+          <button type="button" bitButton buttonType="secondary">No</button>
         </ng-container>
       </bit-simple-dialog>
     `,
@@ -60,13 +60,13 @@ export const CustomIcon: Story = {
 export const HideIcon: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-simple-dialog hideIcon>
         <span bitDialogTitle>Premium Subscription Available</span>
         <span bitDialogContent> Message Content</span>
         <ng-container bitDialogFooter>
-          <button bitButton buttonType="primary">Yes</button>
-          <button bitButton buttonType="secondary">No</button>
+          <button type="button" bitButton buttonType="primary">Yes</button>
+          <button type="button" bitButton buttonType="secondary">No</button>
         </ng-container>
       </bit-simple-dialog>
     `,
@@ -76,7 +76,7 @@ export const HideIcon: Story = {
 export const ScrollingContent: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-simple-dialog>
         <span bitDialogTitle>Alert Dialog</span>
         <span bitDialogContent>
@@ -87,8 +87,8 @@ export const ScrollingContent: Story = {
           end of sequence!
         </span>
         <ng-container bitDialogFooter>
-          <button bitButton buttonType="primary">Yes</button>
-          <button bitButton buttonType="secondary">No</button>
+          <button type="button" bitButton buttonType="primary">Yes</button>
+          <button type="button" bitButton buttonType="secondary">No</button>
         </ng-container>
       </bit-simple-dialog>
     `,
@@ -101,13 +101,13 @@ export const ScrollingContent: Story = {
 export const TextOverflow: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-simple-dialog>
         <span bitDialogTitle>Alert Dialogdialogdialogdialogdialogdialogdialogdialogdialogdialogdialogdialogdialog</span>
         <span bitDialogContent>Message Contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</span>
         <ng-container bitDialogFooter>
-          <button bitButton buttonType="primary">Yes</button>
-          <button bitButton buttonType="secondary">No</button>
+          <button type="button" bitButton buttonType="primary">Yes</button>
+          <button type="button" bitButton buttonType="secondary">No</button>
         </ng-container>
       </bit-simple-dialog>
     `,
diff --git a/libs/components/src/form-field/form-field.stories.ts b/libs/components/src/form-field/form-field.stories.ts
index fc6d29c11ad..9fe8b057d4e 100644
--- a/libs/components/src/form-field/form-field.stories.ts
+++ b/libs/components/src/form-field/form-field.stories.ts
@@ -346,11 +346,11 @@ export const ButtonInputGroup: Story = {
             <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
         </bit-label>
-        <button bitPrefix bitIconButton="bwi-star" [appA11yTitle]="'Favorite Label'"></button>
+        <button type="button" bitPrefix bitIconButton="bwi-star" [appA11yTitle]="'Favorite Label'"></button>
         <input bitInput placeholder="Placeholder" />
-        <button bitSuffix bitIconButton="bwi-eye" [appA11yTitle]="'Hide Label'"></button>
-        <button bitSuffix bitIconButton="bwi-clone" [appA11yTitle]="'Clone Label'"></button>
-        <button bitSuffix bitIconButton="bwi-ellipsis-v" [appA11yTitle]="'Menu Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-eye" [appA11yTitle]="'Hide Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-clone" [appA11yTitle]="'Clone Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" [appA11yTitle]="'Menu Label'"></button>
       </bit-form-field>
     `,
   }),
@@ -363,11 +363,11 @@ export const DisabledButtonInputGroup: Story = {
     template: /*html*/ `
       <bit-form-field>
         <bit-label>Label</bit-label>
-        <button bitPrefix bitIconButton="bwi-star" disabled [appA11yTitle]="'Favorite Label'"></button>
+        <button type="button" bitPrefix bitIconButton="bwi-star" disabled [appA11yTitle]="'Favorite Label'"></button>
         <input bitInput placeholder="Placeholder" disabled />
-        <button bitSuffix bitIconButton="bwi-eye" disabled [appA11yTitle]="'Hide Label'"></button>
-        <button bitSuffix bitIconButton="bwi-clone" disabled [appA11yTitle]="'Clone Label'"></button>
-        <button bitSuffix bitIconButton="bwi-ellipsis-v" disabled [appA11yTitle]="'Menu Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-eye" disabled [appA11yTitle]="'Hide Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-clone" disabled [appA11yTitle]="'Clone Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" disabled [appA11yTitle]="'Menu Label'"></button>
 
       </bit-form-field>
     `,
@@ -382,9 +382,9 @@ export const PartiallyDisabledButtonInputGroup: Story = {
       <bit-form-field>
         <bit-label>Label</bit-label>
         <input bitInput placeholder="Placeholder" disabled />
-        <button bitSuffix bitIconButton="bwi-eye" [appA11yTitle]="'Hide Label'"></button>
-        <button bitSuffix bitIconButton="bwi-clone" [appA11yTitle]="'Clone Label'"></button>
-        <button bitSuffix bitIconButton="bwi-ellipsis-v" disabled [appA11yTitle]="'Menu Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-eye" [appA11yTitle]="'Hide Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-clone" [appA11yTitle]="'Clone Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" disabled [appA11yTitle]="'Menu Label'"></button>
       </bit-form-field>
     `,
   }),
diff --git a/libs/components/src/icon-button/icon-button.stories.ts b/libs/components/src/icon-button/icon-button.stories.ts
index fdcda07f021..45022a55535 100644
--- a/libs/components/src/icon-button/icon-button.stories.ts
+++ b/libs/components/src/icon-button/icon-button.stories.ts
@@ -29,7 +29,7 @@ export const Default: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <button ${formatArgsForCodeSnippet<BitIconButtonComponent>(args)}>Button</button>
+      <button type="button" ${formatArgsForCodeSnippet<BitIconButtonComponent>(args)}>Button</button>
     `,
   }),
 };
@@ -76,7 +76,7 @@ export const NavContrast: Story = {
     template: /*html*/ `
     <div class="tw-bg-background-alt3 tw-p-6 tw-w-full tw-inline-block">
       <!-- <div> used only to provide dark background color -->
-      <button ${formatArgsForCodeSnippet<BitIconButtonComponent>(args)}>Button</button>
+      <button type="button" ${formatArgsForCodeSnippet<BitIconButtonComponent>(args)}>Button</button>
     </div>
       `,
   }),
@@ -91,7 +91,7 @@ export const Contrast: Story = {
     template: /*html*/ `
     <div class="tw-bg-primary-600 tw-p-6 tw-w-full tw-inline-block">
       <!-- <div> used only to provide dark background color -->
-      <button ${formatArgsForCodeSnippet<BitIconButtonComponent>(args)}>Button</button>
+      <button type="button" ${formatArgsForCodeSnippet<BitIconButtonComponent>(args)}>Button</button>
     </div>
       `,
   }),
diff --git a/libs/components/src/item/item.stories.ts b/libs/components/src/item/item.stories.ts
index 6187266c40c..15b81f3f67e 100644
--- a/libs/components/src/item/item.stories.ts
+++ b/libs/components/src/item/item.stories.ts
@@ -66,7 +66,7 @@ export const Default: Story = {
     props: args,
     template: /*html*/ `
       <bit-item>
-        <button bit-item-content>
+        <button type="button" bit-item-content>
           <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
           Foo
           <span slot="secondary">Bar</span>
@@ -120,12 +120,12 @@ export const ContentTypes: Story = {
         </a>
       </bit-item>
       <bit-item>
-        <button bit-item-content href="#">
+        <button type="button" bit-item-content href="#">
           And I am a button.
         </button>
       </bit-item>
       <bit-item>
-        <button bit-item-content disabled title="I'm a disabled button">
+        <button type="button" bit-item-content disabled title="I'm a disabled button">
           And I am a disabled button.
         </button>
       </bit-item>
@@ -187,7 +187,7 @@ export const TextOverflowWrap: Story = {
 const multipleActionListTemplate = /*html*/ `
   <bit-item-group aria-label="Multiple Action List">
     <bit-item>
-      <button bit-item-content>
+      <button type="button" bit-item-content>
         <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
         Foo
         <span slot="secondary">Bar</span>
@@ -206,7 +206,7 @@ const multipleActionListTemplate = /*html*/ `
       </ng-container>
     </bit-item>
     <bit-item>
-      <button bit-item-content>
+      <button type="button" bit-item-content>
         <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
         Foo
         <span slot="secondary">Bar</span>
@@ -225,7 +225,7 @@ const multipleActionListTemplate = /*html*/ `
       </ng-container>
     </bit-item>
     <bit-item>
-      <button bit-item-content>
+      <button type="button" bit-item-content>
         <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
         Foo
         <span slot="secondary">Bar</span>
@@ -244,7 +244,7 @@ const multipleActionListTemplate = /*html*/ `
       </ng-container>
     </bit-item>
     <bit-item>
-      <button bit-item-content>
+      <button type="button" bit-item-content>
         <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
         Foo
         <span slot="secondary">Bar</span>
@@ -263,7 +263,7 @@ const multipleActionListTemplate = /*html*/ `
       </ng-container>
     </bit-item>
     <bit-item>
-      <button bit-item-content>
+      <button type="button" bit-item-content>
         <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
         Foo
         <span slot="secondary">Bar</span>
@@ -282,7 +282,7 @@ const multipleActionListTemplate = /*html*/ `
       </ng-container>
     </bit-item>
     <bit-item>
-      <button bit-item-content>
+      <button type="button" bit-item-content>
         <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
         Foo
         <span slot="secondary">Bar</span>
@@ -400,7 +400,7 @@ export const VirtualScrolling: Story = {
       <cdk-virtual-scroll-viewport [itemSize]="54" class="tw-h-[500px]">
         <bit-item-group aria-label="Virtual Scrolling">
           <bit-item *cdkVirtualFor="let item of data">
-            <button bit-item-content>
+            <button type="button" bit-item-content>
               <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
               {{ item }}
             </button>
@@ -429,7 +429,7 @@ export const WithoutBorderRadius: Story = {
     template: /*html*/ `
       <bit-layout>
       <bit-item>
-        <button bit-item-content>
+        <button type="button" bit-item-content>
           <i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
           Foo
           <span slot="secondary">Bar</span>
diff --git a/libs/components/src/link/link.stories.ts b/libs/components/src/link/link.stories.ts
index 6a0be5499dd..ae91c9be108 100644
--- a/libs/components/src/link/link.stories.ts
+++ b/libs/components/src/link/link.stories.ts
@@ -73,22 +73,22 @@ export const Buttons: Story = {
     template: /*html*/ `
     <div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-600': linkType === 'contrast' }">
       <div class="tw-block tw-p-2">
-        <button bitLink [linkType]="linkType">Button</button>
+        <button type="button" bitLink [linkType]="linkType">Button</button>
       </div>
       <div class="tw-block tw-p-2">
-        <button bitLink [linkType]="linkType">
+        <button type="button" bitLink [linkType]="linkType">
           <i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
           Add Icon Button
         </button>
       </div>
       <div class="tw-block tw-p-2">
-        <button bitLink [linkType]="linkType">
+        <button type="button" bitLink [linkType]="linkType">
           <i class="bwi bwi-fw bwi-sm bwi-angle-right" aria-hidden="true"></i>
           Chevron Icon Button
         </button>
       </div>
       <div class="tw-block tw-p-2">
-        <button bitLink [linkType]="linkType" class="tw-text-sm">Small Button</button>
+        <button type="button" bitLink [linkType]="linkType" class="tw-text-sm">Small Button</button>
       </div>
     </div>
     `,
@@ -134,7 +134,7 @@ export const Inline: Story = {
     props: args,
     template: /*html*/ `
       <span class="tw-text-main">
-        On the internet paragraphs often contain <a bitLink href="#">inline links</a>, but few know that <button bitLink>buttons</button> can be used for similar purposes.
+        On the internet paragraphs often contain <a bitLink href="#">inline links</a>, but few know that <button type="button" bitLink>buttons</button> can be used for similar purposes.
       </span>
     `,
   }),
@@ -147,10 +147,10 @@ export const Disabled: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <button bitLink disabled linkType="primary" class="tw-me-2">Primary</button>
-      <button bitLink disabled linkType="secondary" class="tw-me-2">Secondary</button>
+      <button type="button" bitLink disabled linkType="primary" class="tw-me-2">Primary</button>
+      <button type="button" bitLink disabled linkType="secondary" class="tw-me-2">Secondary</button>
       <div class="tw-bg-primary-600 tw-p-2 tw-inline-block">
-        <button bitLink disabled linkType="contrast">Contrast</button>
+        <button type="button" bitLink disabled linkType="contrast">Contrast</button>
       </div>
     `,
   }),
diff --git a/libs/components/src/menu/menu.stories.ts b/libs/components/src/menu/menu.stories.ts
index f1f4d8df000..7c4894cbb2f 100644
--- a/libs/components/src/menu/menu.stories.ts
+++ b/libs/components/src/menu/menu.stories.ts
@@ -57,7 +57,7 @@ export const ClosedMenu: Story = {
     props: args,
     template: /*html*/ `
       <div class="tw-h-40">
-        <button bitButton buttonType="secondary" [bitMenuTriggerFor]="myMenu">Open menu</button>
+        <button type="button" bitButton buttonType="secondary" [bitMenuTriggerFor]="myMenu">Open menu</button>
       </div>
 
       <bit-menu #myMenu>
diff --git a/libs/components/src/navigation/nav-item.stories.ts b/libs/components/src/navigation/nav-item.stories.ts
index 94d7d33cea3..c3f7e526ecb 100644
--- a/libs/components/src/navigation/nav-item.stories.ts
+++ b/libs/components/src/navigation/nav-item.stories.ts
@@ -86,9 +86,10 @@ export const WithoutRoute: Story = {
 export const WithChildButtons: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-nav-item text="Hello World Very Cool World" [route]="['']" icon="bwi-collection-shared">
         <button
+          type="button" 
           slot="end"
           class="tw-ms-auto"
           [bitIconButton]="'bwi-pencil-square'"
@@ -97,6 +98,7 @@ export const WithChildButtons: Story = {
           aria-label="option 2"
         ></button>
         <button
+          type="button" 
           slot="end"
           class="tw-ms-auto"
           [bitIconButton]="'bwi-check'"
diff --git a/libs/components/src/popover/popover.stories.ts b/libs/components/src/popover/popover.stories.ts
index d1446f917f2..c8798d42ba2 100644
--- a/libs/components/src/popover/popover.stories.ts
+++ b/libs/components/src/popover/popover.stories.ts
@@ -68,7 +68,7 @@ const popoverContent = /*html*/ `
       <li>Esse labore veniam tempora</li>
       <li>Adipisicing elit ipsum <a href="#" bitLink>iustolaborum</a></li>
     </ul>
-    <button bitButton class="tw-mt-4" (click)="triggerRef.closePopover()">Close</button>
+    <button type="button" bitButton class="tw-mt-4" (click)="triggerRef.closePopover()">Close</button>
   </bit-popover>
 `;
 
diff --git a/libs/components/src/section/section.stories.ts b/libs/components/src/section/section.stories.ts
index 53e6bc078c5..f28cca0af7b 100644
--- a/libs/components/src/section/section.stories.ts
+++ b/libs/components/src/section/section.stories.ts
@@ -69,7 +69,7 @@ export const HeaderVariants: Story = {
         <h2 bitTypography="h6">
           Title with icon button suffix
         </h2>
-        <button bitIconButton="bwi-refresh" size="small"></button>
+        <button type="button" bitIconButton="bwi-refresh" size="small"></button>
       </bit-section-header>
     `,
   }),
@@ -88,7 +88,7 @@ export const HeaderEndSlotVariants: Story = {
         <h2 bitTypography="h6">
           Title with end slot icon button
         </h2>
-        <button bitIconButton="bwi-star" size="small" slot="end"></button>
+        <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
       </bit-section-header>
     `,
   }),
@@ -103,7 +103,7 @@ export const HeaderWithPadding: Story = {
             <h2 bitTypography="h6">
               Card as immediate sibling
             </h2>
-            <button bitIconButton="bwi-star" size="small" slot="end"></button>
+            <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
           </bit-section-header>
           <bit-card>
             <h3 bitTypography="h3">bit-section-header has padding</h3>
@@ -114,7 +114,7 @@ export const HeaderWithPadding: Story = {
             <h2 bitTypography="h6">
               Card nested in immediate sibling
             </h2>
-            <button bitIconButton="bwi-star" size="small" slot="end"></button>
+            <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
           </bit-section-header>
           <div>
             <bit-card>
@@ -127,7 +127,7 @@ export const HeaderWithPadding: Story = {
             <h2 bitTypography="h6">
               Item as immediate sibling
             </h2>
-            <button bitIconButton="bwi-star" size="small" slot="end"></button>
+            <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
           </bit-section-header>
           <bit-item>
             <bit-item-content bitTypography="body1">bit-section-header has padding</bit-item-content>
@@ -138,7 +138,7 @@ export const HeaderWithPadding: Story = {
             <h2 bitTypography="h6">
               Item nested in immediate sibling
             </h2>
-            <button bitIconButton="bwi-star" size="small" slot="end"></button>
+            <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
           </bit-section-header>
           <bit-item-group>
             <bit-item>
diff --git a/libs/components/src/tabs/tabs.stories.ts b/libs/components/src/tabs/tabs.stories.ts
index 0fe88c57a16..3be63b433aa 100644
--- a/libs/components/src/tabs/tabs.stories.ts
+++ b/libs/components/src/tabs/tabs.stories.ts
@@ -153,7 +153,7 @@ export const PreserveContentTabs: Story = {
 export const KeyboardNavigation: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-tab-group label="Keyboard Navigation Tabs" class="tw-text-main">
         <bit-tab label="Form Tab">
           <p>
@@ -174,7 +174,7 @@ export const KeyboardNavigation: Story = {
           <p>This tab has no focusable content, but the panel should still be focusable</p>
         </bit-tab>
       </bit-tab-group>
-      <button bitButton buttonType="primary" class="tw-mt-5">External Button</button>
+      <button type="button" bitButton buttonType="primary" class="tw-mt-5">External Button</button>
     `,
   }),
 };