refactor: icon and download button use button component

web/src/lib/components/kit/ui/Badge.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Check } from "@lucide/svelte";
 
+	// TODO: сделать эти типы общими для кнопок \ бейджей \ етц???
 	const ToneVariantDefine = {
 		DEFAULT: "default",
 		ACCENT: "accent",

web/src/lib/components/kit/ui/Button.svelte

@@ -1,26 +1,19 @@
 <script lang="ts">
-	import type { Component, Snippet } from "svelte";
-	import Icon from "../Icon.svelte";
-
-	const ButtonVariantDefine = {
-		PRIMARY: "primary",
-		OUTLINE: "outline",
-		ACCENT: "accent",
-		DANGER: "danger",
-	} as const;
-
-	type ButtonVariant =
-		(typeof ButtonVariantDefine)[keyof typeof ButtonVariantDefine];
+	import type { Component } from "svelte";
+	import { ButtonVariantDefine, type ButtonVariant } from "../define";
+	import Icon from "./Icon.svelte";
 
 	interface Props {
-		children: Snippet;
+		label: string;
+		ariaLabel?: string;
 		onclick?: () => void;
 		variant?: ButtonVariant;
 		icon?: Component<{ size?: number; class?: string }>;
 		disabled?: boolean;
 	}
 	let {
-		children,
+		label,
+		ariaLabel = label,
 		onclick,
 		variant = ButtonVariantDefine.PRIMARY,
 		icon,
@@ -28,9 +21,14 @@
 	}: Props = $props();
 </script>
 
-<button class="btn btn--{variant}" {disabled} onclick={() => onclick?.()}>
+<button
+	class="btn btn--{variant}"
+	{disabled}
+	aria-label={ariaLabel}
+	onclick={() => onclick?.()}
+>
 	{#if icon}<Icon {icon} size={14} />{/if}
-	<span class="btn-label">{@render children()}</span>
+	<span class="btn-label">{label}</span>
 </button>
 
 <style>

web/src/lib/components/kit/ui/DownloadButton.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { ArrowDownToLine, Download } from "@lucide/svelte";
+	import { Download } from "@lucide/svelte";
+	import Button from "./Button.svelte";
 
 	interface Props {
 		label: string;
@@ -8,29 +9,4 @@
 	let { label, onclick }: Props = $props();
 </script>
 
-<button class="download-btn" type="button" onclick={() => onclick?.()}>
-	<Download size={16} />
-	{label}
-	<ArrowDownToLine size={14} />
-</button>
-
-<style>
-	.download-btn {
-		background: var(--color-main);
-		color: var(--color-background);
-		width: 100%;
-		height: calc(5 * var(--space-m));
-		font-size: var(--font-button);
-		font-family: var(--font-mono);
-		border: 0;
-		justify-content: center;
-		align-items: center;
-		gap: var(--space-m);
-		margin-top: var(--space-xl);
-		display: flex;
-		white-space: nowrap;
-	}
-	.download-btn:hover {
-		background: var(--color-main-tint);
-	}
-</style>
+<Button icon={Download} {label} {onclick} />

web/src/lib/components/kit/ui/Icon.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { Component } from "svelte";
+
+	interface Props {
+		icon: Component<{ size?: number; class?: string }>;
+		size?: number;
+	}
+	let { icon: IconComp, size = 16 }: Props = $props();
+</script>
+
+<IconComp {size} />

web/src/lib/components/kit/ui/IconButton.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Component } from "svelte";
+	import { ButtonVariantDefine, type ButtonVariant } from "../define";
+	import Button from "./Button.svelte";
+
+	interface Props {
+		icon: Component<{ size?: number; class?: string }>;
+		label: string;
+		onclick?: () => void;
+		variant?: ButtonVariant;
+		disabled?: boolean;
+	}
+
+	let {
+		icon,
+		label,
+		onclick,
+		variant = ButtonVariantDefine.PRIMARY,
+		disabled = false,
+	}: Props = $props();
+</script>
+
+<Button label="" {onclick} {variant} {disabled} {icon} ariaLabel={label} />