diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.test.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.test.tsx
index 78350a9108a..d3cf04a4b71 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.test.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.test.tsx
@@ -1,3 +1,5 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import renderer from 'react-test-renderer';
 
@@ -11,6 +13,17 @@ describe('ColorPicker', () => {
     ).toBeTruthy();
   });
 
+  it('should not have buttons with default submit type', async () => {
+    render(<ColorPicker color="blue" enableNamedColors onChange={() => {}} />);
+    const mainButton = screen.getAllByRole('button');
+    expect(mainButton.length).toBe(1);
+    mainButton.forEach((button) => expect(button).toHaveAttribute('type', 'button'));
+    await userEvent.click(mainButton[0]);
+    const buttons = screen.getAllByRole('button');
+    expect(buttons.length).toBe(35);
+    buttons.forEach((button) => expect(button).toHaveAttribute('type', 'button'));
+  });
+
   it('renders custom trigger when supplied', () => {
     const div = renderer
       .create(
diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
index 63c463178ae..110f0f30dfc 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
@@ -100,7 +100,7 @@ class UnThemedColorPickerPopover<T extends CustomPickersDescriptor> extends Comp
       <>
         {Object.keys(customPickers).map((key) => {
           return (
-            <button className={this.getTabClassName(key)} onClick={this.onTabChange(key)} key={key}>
+            <button className={this.getTabClassName(key)} onClick={this.onTabChange(key)} key={key} type="button">
               {customPickers[key].name}
             </button>
           );
@@ -120,10 +120,10 @@ class UnThemedColorPickerPopover<T extends CustomPickersDescriptor> extends Comp
         */}
         <div tabIndex={-1} className={styles.colorPickerPopover}>
           <div className={styles.colorPickerPopoverTabs}>
-            <button className={this.getTabClassName('palette')} onClick={this.onTabChange('palette')}>
+            <button className={this.getTabClassName('palette')} onClick={this.onTabChange('palette')} type="button">
               Colors
             </button>
-            <button className={this.getTabClassName('spectrum')} onClick={this.onTabChange('spectrum')}>
+            <button className={this.getTabClassName('spectrum')} onClick={this.onTabChange('spectrum')} type="button">
               Custom
             </button>
             {this.renderCustomPickerTabs()}
diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx
index 679346817a5..e63572c5aca 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx
@@ -34,7 +34,7 @@ export const ColorSwatch = React.forwardRef<HTMLDivElement, Props>(
     return (
       <div ref={ref} className={styles.wrapper} data-testid={selectors.components.ColorSwatch.name} {...otherProps}>
         {hasLabel && <span className={styles.label}>{label}</span>}
-        <button className={styles.swatch} {...focusProps} aria-label={colorLabel} />
+        <button className={styles.swatch} {...focusProps} aria-label={colorLabel} type="button" />
       </div>
     );
   }