feat: Support reset style

This is WIP, maybe all: unset is better

1 files changed, 15 insertions, 1 deletions

diff --git a/code/app/src/lib/components/button.svelte b/code/app/src/lib/components/button.svelte
index cbc09e2..abe62ae 100644
--- a/code/app/src/lib/components/button.svelte
+++ b/code/app/src/lib/components/button.svelte
@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-    export type ButtonKind = "primary" | "secondary" | "white";
+    export type ButtonKind = "primary" | "secondary" | "white" | "reset";
     export type ButtonSize = "sm" | "lg" | "md" | "xl";
 </script>
 
@@ -68,6 +68,9 @@
             kindClasses = "border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-400";
             spinnerTextClasses = "text-gray-700";
             break;
+        case "reset":
+            kindClasses = "reset outline-none ring-0 focus:ring-0 focus-visible:ring-0";
+            break;
     }
 </script>
 
@@ -101,3 +104,14 @@
         {text}
     </button>
 {/if}
+
+<style>
+    .reset {
+        border: 0px;
+        outline: none;
+        
+    }
+    .reset:focus {
+        outline: none;
+    }
+</style>