diff --git a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.test.tsx b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.test.tsx
index 2848cbdbfbf..4dacf41b895 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.test.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { CustomHeadersSettings, Props } from './CustomHeadersSettings';
+import { Button } from '../Button';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
@@ -48,6 +49,11 @@ describe('Render', () => {
     expect(wrapper.find('SecretFormField').exists()).toBeTruthy();
   });
 
+  it('add header button should not submit the form', () => {
+    const wrapper = setup();
+    expect(wrapper.find(Button).getDOMNode()).toHaveAttribute('type', 'button');
+  });
+
   it('should remove a header', () => {
     const wrapper = setup({
       dataSourceConfig: {
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx
index 78c0f12e452..7f8f8de05f7 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx
@@ -206,6 +206,7 @@ export class CustomHeadersSettings extends PureComponent<Props, State> {
           <Button
             variant="secondary"
             icon="plus"
+            type="button"
             onClick={(e) => {
               this.onHeaderAdd();
             }}
diff --git a/public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx b/public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx
index 932f58b80f6..1e0c3ac8482 100644
--- a/public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx
+++ b/public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx
@@ -38,6 +38,12 @@ describe('DerivedFields', () => {
     expect(wrapper.find(Button).filterWhere((button: any) => button.contains('Show example log message')).length).toBe(
       1
     );
+    expect(
+      wrapper
+        .find(Button)
+        .filterWhere((button: any) => button.contains('Show example log message'))
+        .getDOMNode()
+    ).toHaveAttribute('type', 'button');
     expect(wrapper.find(DerivedField).length).toBe(2);
   });
 
diff --git a/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx b/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
index bcabb0475ab..d77803febec 100644
--- a/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
+++ b/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
@@ -82,7 +82,7 @@ export const DerivedFields = (props: Props) => {
           </Button>
 
           {value && value.length > 0 && (
-            <Button variant="secondary" onClick={() => setShowDebug(!showDebug)}>
+            <Button variant="secondary" type="button" onClick={() => setShowDebug(!showDebug)}>
               {showDebug ? 'Hide example log message' : 'Show example log message'}
             </Button>
           )}