diff --git a/CHANGELOG.md b/CHANGELOG.md
index fdcefc1..878a30d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte-awesome-color-picker
 
+## 3.0.6
+
+### Patch Changes
+
+- prevent button to trigger form (fix #70)
+
 ## 3.0.5
 
 - Fix bug occurring when limiting the amount of textModeInputs or changing the order of textModeInputs (thanks to [al-soup](https://github.com/al-soup))
diff --git a/package.json b/package.json
index 9405594..07ba680 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "svelte-awesome-color-picker",
-	"version": "3.0.5",
+	"version": "3.0.6",
 	"description": "A highly customizable color picker component library",
 	"homepage": "https://svelte-awesome-color-picker.vercel.app",
 	"repository": {
diff --git a/src/lib/components/variant/default/TextInput.svelte b/src/lib/components/variant/default/TextInput.svelte
index db6bb31..61dbfa4 100644
--- a/src/lib/components/variant/default/TextInput.svelte
+++ b/src/lib/components/variant/default/TextInput.svelte
@@ -88,7 +88,7 @@
 	</div>
 
 	{#if textInputModes.length > 1}
-		<button on:click={() => (mode = nextMode)}>
+		<button type="button" on:click={() => (mode = nextMode)}>
 			<span class="disappear" aria-hidden="true">{texts.color[mode]}</span>
 			<span class="appear">{texts.changeTo} {nextMode}</span>
 		</button>
diff --git a/src/routes/sections/50-Examples.md b/src/routes/sections/50-Examples.md
index 8ec0a08..3c089c0 100644
--- a/src/routes/sections/50-Examples.md
+++ b/src/routes/sections/50-Examples.md
@@ -25,8 +25,9 @@
 
 ### Default layout
 
+<form action="post">
 <ColorPicker bind:hex bind:rgb bind:hsv />
-
+</form>
 <div class="example-wrapper">
 <div class="overflow">