feat: use new button component everyhwerre

app/src/lib/graph-interface/components/GroupBreadcrumps.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Button } from '@nodarium/ui';
   import { getGraphManager } from '../graph-state.svelte';
   const graph = getGraphManager();
 
@@ -23,27 +24,19 @@
 
 {#if graph.isInsideGroup}
   <div class="group-name flex gap-1 items-center">
-    <button
+    <Button variant="ghost" size="sm" onclick={() => exitToGroup()}>Root</Button>
-      class="bg-layer-2 opacity-75 hover:opacity-100 cursor-pointer rounded-sm p-1 px-2"
-      onclick={() => exitToGroup()}
-    >
-      Root
-    </button>
 
     {#each intermediateGroups as entry (entry.id)}
       <span class="i-[tabler--arrow-right]"></span>
-      <button
+      <Button variant="ghost" size="sm" onclick={() => exitToGroup(entry.id)}>
-        class="bg-layer-2 opacity-75 hover:opacity-100 cursor-pointer rounded-sm p-1 px-2"
-        onclick={() => exitToGroup(entry.id)}
-      >
         {getGroupName(entry.id)}
-      </button>
+      </Button>
     {/each}
 
     <span class="i-[tabler--arrow-right]"></span>
-    <button class="bg-layer-2 opacity-100 cursor-pointer rounded-sm p-1 px-2">
+    <Button variant="ghost" size="sm" class="opacity-100!">
       {getGroupName(graph.currentGroupId!)}
-    </button>
+    </Button>
   </div>
 {/if}
 

app/src/lib/settings/NestedSettings.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { localState } from '$lib/helpers/localState.svelte';
   import type { NodeInput } from '@nodarium/types';
-  import Input from '@nodarium/ui';
+  import Input, { Button as UiButton } from '@nodarium/ui';
   import { onMount } from 'svelte';
   import NestedSettings from './NestedSettings.svelte';
 
@@ -126,9 +126,9 @@
   {@const inputType = type[key]}
   <div class="input input-{inputType.type}" class:first-level={depth === 1}>
     {#if inputType.type === 'button'}
-      <button onclick={() => onButtonClick?.(id)}>
+      <UiButton onclick={() => onButtonClick?.(id)}>
         {inputType.label || key}
-      </button>
+      </UiButton>
     {:else}
       {#if inputType.label !== ''}
         <label for={id}>{inputType.label || key}</label>
@@ -224,13 +224,6 @@
     gap: 10px;
   }
 
-  button {
-    cursor: pointer;
-    background: var(--color-layer-2);
-    padding-block: 5px;
-    border-radius: 4px;
-  }
-
   hr {
     margin: 0;
     left: 0;

app/src/lib/sidebar/panels/BenchmarkPanel.svelte

@@ -8,7 +8,7 @@
   import { humanizeDuration } from '$lib/helpers';
   import { localState } from '$lib/helpers/localState.svelte';
   import Monitor from '$lib/performance/Monitor.svelte';
-  import { InputNumber } from '@nodarium/ui';
+  import { Button, InputNumber } from '@nodarium/ui';
   import { writable } from 'svelte/store';
 
   function calculateStandardDeviation(array: number[]) {
@@ -112,7 +112,7 @@
       onclick={() => copyContent(result?.stdev + '')}
     >(click to copy)</i>
     <div>
-      <button onclick={() => (isRunning = false)}>reset</button>
+      <Button onclick={() => (isRunning = false)}>reset</Button>
     </div>
   {:else if isRunning}
     <p>WarmUp ({$warmUp}/{warmUpAmount})</p>
@@ -126,7 +126,7 @@
   {:else}
     <label for="bench-samples">Samples</label>
     <InputNumber id="bench-sample" bind:value={amount.value} max={1000} step={1} />
-    <button onclick={benchmark} disabled={isRunning}>start</button>
+    <Button variant="primary" onclick={benchmark} disabled={isRunning}>start</Button>
   {/if}
 </div>
 

app/src/lib/sidebar/panels/ExportSettings.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Button } from '@nodarium/ui';
   import FileSaver from 'file-saver';
   import type { Group } from 'three';
   import type { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';
@@ -51,7 +52,7 @@
   }
 </script>
 
-<div class="p-4">
+<div class="p-4 flex gap-2">
-  <button onclick={exportObj}>export obj</button>
+  <Button onclick={exportObj}>export obj</Button>
-  <button onclick={exportGltf}>export gltf</button>
+  <Button onclick={exportGltf}>export gltf</Button>
 </div>

app/src/lib/sidebar/panels/UnusedGroupsPanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { GraphManager } from '$lib/graph-interface/graph-manager.svelte';
+  import { Button } from '@nodarium/ui';
   import type { GroupDefinition } from '@nodarium/types';
   import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 
@@ -51,9 +52,9 @@
   <div class="panel p-4">
     <div class="header">
       <span>Unused groups</span>
-      <button class="remove-all" onclick={() => manager.removeUnusedGroups()}>
+      <Button size="sm" variant="destructive" onclick={() => manager.removeUnusedGroups()}>
         Remove all
-      </button>
+      </Button>
     </div>
 
     <ul class="tree">
@@ -92,20 +93,6 @@
     opacity: 0.7;
   }
 
-  .remove-all {
-    background: none;
-    border: 1px solid var(--color-outline);
-    border-radius: 4px;
-    color: var(--color-text);
-    cursor: pointer;
-    font-family: var(--font-family);
-    font-size: 0.85em;
-    padding: 0.2em 0.5em;
-  }
-
-  .remove-all:hover {
-    border-color: var(--color-active);
-  }
 
   .tree {
     list-style: none;

packages/ui/src/lib/Button.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    variant?: 'default' | 'primary' | 'destructive' | 'ghost';
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    children?: Snippet;
+    type?: 'button' | 'submit' | 'reset';
+  }
+
+  let {
+    variant = 'default',
+    size = 'md',
+    disabled = false,
+    class: _class = '',
+    onclick,
+    children,
+    type = 'button'
+  }: Props = $props();
+
+  const variantClasses = {
+    default: 'bg-layer-2 border border-outline text-text hover:opacity-85',
+    primary: 'bg-selected text-white border border-transparent hover:opacity-88',
+    destructive: 'bg-red-600 text-white border border-transparent hover:opacity-88',
+    ghost: 'bg-layer-2 border border-transparent text-text opacity-75 hover:opacity-100'
+  };
+
+  const sizeClasses = {
+    sm: 'px-2 py-0.5 text-xs',
+    md: 'px-3 py-1 text-sm'
+  };
+</script>
+
+<button
+  {type}
+  {disabled}
+  class:py-1={size === 'sm'}
+  class:px-1={size === 'sm'}
+  class:py-2={size !== 'sm'}
+  class="
+    inline-flex items-center gap-1.5 rounded cursor-pointer
+    font-(--font-family) leading-none whitespace-nowrap
+    transition-opacity duration-100
+    disabled:opacity-40 disabled:cursor-not-allowed
+    {variantClasses[variant]}
+    {sizeClasses[size]}
+    {_class}
+  "
+  {onclick}
+>
+  {@render children?.()}
+</button>