fix(button)!: Change type property to be "button" by default

src/components/button/button.e2e.ts

@@ -1,10 +1,94 @@
 import { E2EElement, newE2EPage } from "@stencil/core/testing";
-import { accessible, disabled, HYDRATED_ATTR, labelable } from "../../tests/commonTests";
+import { accessible, disabled, HYDRATED_ATTR, labelable, defaults } from "../../tests/commonTests";
 import { CSS } from "./resources";
 import { GlobalTestProps } from "../../tests/utils";
 import { html } from "../../../support/formatting";
 
 describe("calcite-button", () => {
+  it("defaults", async () =>
+    defaults("calcite-button", [
+      {
+        propertyName: "alignment",
+        defaultValue: "center"
+      },
+      {
+        propertyName: "appearance",
+        defaultValue: "solid"
+      },
+      {
+        propertyName: "label",
+        defaultValue: undefined
+      },
+      {
+        propertyName: "color",
+        defaultValue: "blue"
+      },
+      {
+        propertyName: "disabled",
+        defaultValue: false
+      },
+      {
+        propertyName: "href",
+        defaultValue: undefined
+      },
+      {
+        propertyName: "iconEnd",
+        defaultValue: undefined
+      },
+      {
+        propertyName: "iconFlipRtl",
+        defaultValue: undefined
+      },
+      {
+        propertyName: "iconStart",
+        defaultValue: undefined
+      },
+      {
+        propertyName: "intlLoading",
+        defaultValue: "Loading"
+      },
+      {
+        propertyName: "loading",
+        defaultValue: false
+      },
+      {
+        propertyName: "name",
+        defaultValue: undefined
+      },
+      {
+        propertyName: "rel",
+        defaultValue: undefined
+      },
+      {
+        propertyName: "form",
+        defaultValue: undefined
+      },
+      {
+        propertyName: "round",
+        defaultValue: false
+      },
+      {
+        propertyName: "scale",
+        defaultValue: "m"
+      },
+      {
+        propertyName: "splitChild",
+        defaultValue: false
+      },
+      {
+        propertyName: "target",
+        defaultValue: undefined
+      },
+      {
+        propertyName: "type",
+        defaultValue: "button"
+      },
+      {
+        propertyName: "width",
+        defaultValue: "auto"
+      }
+    ]));
+
   it("renders as a button with default props", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-button>Continue</calcite-button>`);

src/components/button/button.tsx

@@ -93,7 +93,7 @@ export class Button implements LabelableComponent, InteractiveComponent {
   @Prop() target?: string;
 
   /** The type attribute to apply to the button */
-  @Prop({ mutable: true }) type?: string;
+  @Prop({ mutable: true }) type = "button";
 
   /** specify the width of the button, defaults to auto */
   @Prop({ reflect: true }) width: Width = "auto";
@@ -135,9 +135,6 @@ export class Button implements LabelableComponent, InteractiveComponent {
   componentWillLoad(): void {
     if (Build.isBrowser) {
       this.updateHasContent();
-      if (!this.href && !this.type) {
-        this.type = "submit";
-      }
     }
   }
 
@@ -270,13 +267,16 @@ export class Button implements LabelableComponent, InteractiveComponent {
   // act on a requested or nearby form based on type
   private handleClick = (): void => {
     const { formEl, type } = this;
+
+    if (this.href) {
+      return;
+    }
+
     // this.type refers to type attribute, not child element type
-    if (!this.href && type !== "button") {
-      if (type === "submit") {
-        formEl?.requestSubmit();
-      } else if (type === "reset") {
-        formEl?.reset();
-      }
+    if (type === "submit") {
+      formEl?.requestSubmit();
+    } else if (type === "reset") {
+      formEl?.reset();
     }
   };
 }