feat: add button code (no style)

package.json

@@ -37,5 +37,8 @@
 			"esbuild",
 			"svelte-preprocess"
 		]
+	},
+	"dependencies": {
+		"svelte-material-icons": "^3.0.5"
 	}
 }

pnpm-lock.yaml

@@ -7,6 +7,10 @@ settings:
 importers:
 
   .:
+    dependencies:
+      svelte-material-icons:
+        specifier: ^3.0.5
+        version: 3.0.5(svelte@5.25.3)
     devDependencies:
       '@eslint/compat':
         specifier: ^1.2.5
@@ -1119,6 +1123,11 @@ packages:
       svelte:
         optional: true
 
+  svelte-material-icons@3.0.5:
+    resolution: {integrity: sha512-UbhAa+Btd5y6e6DMljVccP+cbJ8lvesltMippiCOvfIUtYe2TsQqM+P6osfrVsZHV47b1tY6AmqCuSpMKnwMOQ==}
+    peerDependencies:
+      svelte: ^3.0.0 || ^4.0.0
+
   svelte@5.25.3:
     resolution: {integrity: sha512-J9rcZ/xVJonAoESqVGHHZhrNdVbrCfkdB41BP6eiwHMoFShD9it3yZXApVYMHdGfCshBsZCKsajwJeBbS/M1zg==}
     engines: {node: '>=18'}
@@ -2180,6 +2189,10 @@ snapshots:
     optionalDependencies:
       svelte: 5.25.3
 
+  svelte-material-icons@3.0.5(svelte@5.25.3):
+    dependencies:
+      svelte: 5.25.3
+
   svelte@5.25.3:
     dependencies:
       '@ampproject/remapping': 2.3.0

src/lib/components/atoms/Button.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+	import type { SpecialTargetValues } from '$types';
+
+	type ButtonType = 'filled' | 'tonal' | 'text' | 'outlined';
+
+	type Props = {
+		type: ButtonType;
+		icon?: Component;
+		iconSize?: number;
+		iconColor?: string;
+		href?: string;
+		target?: `${SpecialTargetValues}` | SpecialTargetValues;
+		label?: string;
+		children?: Snippet;
+		onclick?: () => void;
+	};
+
+	let {
+		type,
+		// https://svelte.dev/docs/svelte/compiler-warnings#svelte_component_deprecated
+		icon: Icon,
+		href,
+		children,
+		label = '',
+		onclick = () => {},
+		iconSize = 20,
+		iconColor = 'currentColor',
+		target = '_self'
+	}: Props = $props();
+</script>
+
+{#if href}
+	<a {href} {target} class:type aria-label={label}>
+		{#if Icon}
+			<Icon size={iconSize} color={iconColor} />
+		{/if}
+		{@render children?.()}
+	</a>
+{:else}
+	<button {onclick} class:type aria-label={label}>
+		{#if Icon}
+			<Icon size={iconSize} color={iconColor} />
+		{/if}
+		{@render children?.()}
+	</button>
+{/if}

src/lib/types.ts

@@ -1,2 +1,9 @@
 export type SHA256AuthHeader =
 	`Digest username="${string}", realm="${string}", nonce="${string}", uri="${string}", algorithm=${string}, response="${string}"`;
+
+export enum SpecialTargetValues {
+	SELF = '_self',
+	BLANK = '_blank',
+	PARENT = '_parent',
+	TOP = '_top'
+}

svelte.config.js

@@ -9,7 +9,8 @@ const config = {
 		alias: {
 			$components: './src/lib/components',
 			$api: './src/lib/api',
-			$lib: './src/lib'
+			$lib: './src/lib',
+			$types: './src/lib/types.ts'
 		}
 	}
 };