diff --git a/src/__snapshots__/devTool.test.tsx.snap b/src/__snapshots__/devTool.test.tsx.snap
index 5ced10d..0b48ea1 100644
--- a/src/__snapshots__/devTool.test.tsx.snap
+++ b/src/__snapshots__/devTool.test.tsx.snap
@@ -24,6 +24,7 @@ exports[`DevTool render correctly  1`] = `
         <button
           class="css-7zizgu"
           title="Close dev panel"
+          type="button"
         >
           ✕
         </button>
@@ -38,6 +39,7 @@ exports[`DevTool render correctly  1`] = `
             class="css-4vv12s"
             style="border-right: 1px solid #0e101c; text-transform: none; font-size: 11px; line-height: 1;"
             title="Update values and state the form"
+            type="button"
           >
             ♺ UPDATE
           </button>
@@ -45,6 +47,7 @@ exports[`DevTool render correctly  1`] = `
             class="css-4vv12s"
             style="border-right: 1px solid #0e101c; text-transform: none; font-size: 11px; line-height: 1;"
             title="Toggle entire fields"
+            type="button"
           >
             [+] EXPAND
           </button>
@@ -79,6 +82,7 @@ exports[`DevTool render correctly  1`] = `
                         class="css-4vv12s"
                         style="border: 1px solid #516391; border-radius: 2px; padding: 3px 5px; display: inline-block; font-size: 10px; line-height: 12px; width: 20px; text-align: center; margin-right: 10px;"
                         title="Toggle field table"
+                        type="button"
                       >
                         +
                       </button>
@@ -86,6 +90,7 @@ exports[`DevTool render correctly  1`] = `
                         class="css-4vv12s"
                         style="border: 1px solid #516391; border-radius: 2px; padding: 3px 5px; display: inline-block; font-size: 10px; line-height: 12px; text-align: center; margin-right: 10px;"
                         title="Scroll into view"
+                        type="button"
                       >
                         Native
                       </button>
@@ -124,6 +129,7 @@ exports[`DevTool render correctly  1`] = `
                         class="css-4vv12s"
                         style="border: 1px solid #516391; border-radius: 2px; padding: 3px 5px; display: inline-block; font-size: 10px; line-height: 12px; width: 20px; text-align: center; margin-right: 10px;"
                         title="Toggle field table"
+                        type="button"
                       >
                         +
                       </button>
@@ -131,6 +137,7 @@ exports[`DevTool render correctly  1`] = `
                         class="css-4vv12s"
                         style="border: 1px solid #516391; border-radius: 2px; padding: 3px 5px; display: inline-block; font-size: 10px; line-height: 12px; text-align: center; margin-right: 10px;"
                         title="Scroll into view"
+                        type="button"
                       >
                         Native
                       </button>
@@ -157,6 +164,7 @@ exports[`DevTool render correctly  1`] = `
             class="css-4vv12s"
             style="margin: 0px; width: 100%; padding: 8px 10px; text-transform: none; font-size: 12px; line-height: 14px;"
             title="Toggle form state panel"
+            type="button"
           >
             <span
               style="transition: 0.5s all; color: rgb(236, 89, 144);"
diff --git a/src/__snapshots__/header.test.tsx.snap b/src/__snapshots__/header.test.tsx.snap
index 589888d..31fc9d2 100644
--- a/src/__snapshots__/header.test.tsx.snap
+++ b/src/__snapshots__/header.test.tsx.snap
@@ -18,6 +18,7 @@ exports[`header should render correct color when form pass 1`] = `
     <button
       class="css-7zizgu"
       title="Close dev panel"
+      type="button"
     >
       ✕
     </button>
@@ -43,6 +44,7 @@ exports[`header should render correct when form failed 1`] = `
     <button
       class="css-7zizgu"
       title="Close dev panel"
+      type="button"
     >
       ✕
     </button>
diff --git a/src/__snapshots__/panelTable.test.tsx.snap b/src/__snapshots__/panelTable.test.tsx.snap
index c92b486..483cb7b 100644
--- a/src/__snapshots__/panelTable.test.tsx.snap
+++ b/src/__snapshots__/panelTable.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`PanelTable should render correctly 1`] = `
               class="css-4vv12s"
               style="border: 1px solid #516391; border-radius: 2px; padding: 3px 5px; display: inline-block; font-size: 10px; line-height: 12px; width: 20px; text-align: center; margin-right: 10px;"
               title="Toggle field table"
+              type="button"
             >
               +
             </button>
@@ -26,6 +27,7 @@ exports[`PanelTable should render correctly 1`] = `
               class="css-4vv12s"
               style="border: 1px solid #516391; border-radius: 2px; padding: 3px 5px; display: inline-block; font-size: 10px; line-height: 12px; text-align: center; margin-right: 10px; cursor: not-allowed; background: rgb(81, 99, 145);"
               title="Scroll into view"
+              type="button"
             >
               Custom
             </button>
diff --git a/src/styled.tsx b/src/styled.tsx
index 23d353f..6c1ac7b 100644
--- a/src/styled.tsx
+++ b/src/styled.tsx
@@ -2,8 +2,8 @@ import styled from '@emotion/styled';
 import colors from './colors';
 
 export const paraGraphDefaultStyle = {
-  fontSize: 14,
-  lineHeight: '22px',
+    fontSize: 14,
+    lineHeight: '22px',
 };
 
 const Button = styled.button`
@@ -21,6 +21,8 @@ const Button = styled.button`
   }
 `;
 
+Button.defaultProps = { type: 'button' };
+
 const CircleButton = styled(Button)`
   font-size: 14px;
   font-weight: bold;