buttons now have type button by default

packages/hydrogen/src/components/BaseButton/BaseButton.client.tsx

@@ -35,6 +35,7 @@ export function BaseButton<AsType extends React.ElementType = 'button'>(
     defaultOnClick,
     children,
     buttonRef,
+    type,
     ...passthroughProps
   } = props;
 
@@ -56,9 +57,15 @@ export function BaseButton<AsType extends React.ElementType = 'button'>(
   );
 
   const Component = as || 'button';
+  const componentType = type || (Component === 'button' ? 'button' : undefined);
 
   return (
-    <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>
+    <Component
+      ref={buttonRef}
+      onClick={handleOnClick}
+      type={componentType}
+      {...passthroughProps}
+    >
       {children}
     </Component>
   );

packages/hydrogen/src/components/BaseButton/tests/BaseButton.vitest.tsx

@@ -99,5 +99,34 @@ describe('<BaseButton/>', () => {
         expect(mockDefaultOnClick).not.toBeCalled();
       });
     });
+
+    describe('base button type attribute', () => {
+      it('is a button by default given the component is a button', () => {
+        render(<BaseButton>Base Button</BaseButton>, {
+          wrapper: ShopifyTestProviders,
+        });
+
+        expect(screen.getByRole('button')).toHaveAttribute('type', 'button');
+      });
+
+      it('is not a button by default given the component is not a button', () => {
+        render(<BaseButton as="p">Base Button</BaseButton>, {
+          wrapper: ShopifyTestProviders,
+        });
+
+        expect(screen.getByText('Base Button')).not.toHaveAttribute(
+          'type',
+          'button'
+        );
+      });
+
+      it('respects user provided type', () => {
+        render(<BaseButton type="submit">Base Button</BaseButton>, {
+          wrapper: ShopifyTestProviders,
+        });
+
+        expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
+      });
+    });
   });
 });