1 files changed, 41 insertions, 0 deletions
diff --git a/app/src/lib/ui/button.svelte b/app/src/lib/ui/button.svelte
new file mode 100644
index 0000000..313cd90
--- /dev/null
+++ b/app/src/lib/ui/button.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+    import type { HTMLButtonAttributes } from "svelte/elements";
+    import { Spinner } from "phosphor-svelte";
+    let { children, loading, type = "button", ...restProps }: Props = $props();
+
+    type Props = {
+        loading?: boolean;
+    } & HTMLButtonAttributes;
+</script>
+
+<button {...restProps} {type}>
+    {@render children?.()}
+    {#if loading}
+        <Spinner />
+    {/if}
+</button>
+
+<style>
+    button {
+        border: 1px solid rgba(0, 0, 0, 0.3);
+        background-color: rgba(0, 0, 0, 0.1);
+        align-items: center;
+        border-radius: 3px;
+        padding: 2px 4px;
+        cursor: pointer;
+        display: flex;
+        gap: 3px;
+        transition: 0.1s all ease;
+
+        &:hover,
+        &:focus {
+            background-color: rgba(0, 0, 0, 0.15);
+        }
+
+        &:active {
+            background-color: rgba(0, 0, 0, 0.2);
+            transform: scale(0.96);
+            transition: 0.2s all ease;
+        }
+    }
+</style>