From 98101217dbef38e02859de58c368055360c747bb Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 24 Feb 2026 18:06:24 +0300
Subject: [PATCH] feat(Button): wrapper arround Button to create square buttons
 with icons

---
 src/shared/ui/Button/IconButton.svelte | 37 ++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/shared/ui/Button/IconButton.svelte

diff --git a/src/shared/ui/Button/IconButton.svelte b/src/shared/ui/Button/IconButton.svelte
new file mode 100644
index 0000000..5f60386
--- /dev/null
+++ b/src/shared/ui/Button/IconButton.svelte
@@ -0,0 +1,37 @@
+<!--
+    Component: IconButton
+    Convenience wrapper — defaults variant to 'icon' and enforces icon-only usage.
+    Identical to <Button variant="icon"> but makes intent explicit at the
+    call site and prevents accidental children being passed.
+-->
+<script lang="ts">
+import type { ComponentProps } from 'svelte';
+import Button from './Button.svelte';
+import type { ButtonVariant } from './types';
+
+type BaseProps = Exclude<ComponentProps<typeof Button>, 'children' | 'iconPosition'>;
+
+interface Props extends BaseProps {
+    variant?: Extract<ButtonVariant, 'icon' | 'ghost' | 'secondary'>;
+}
+
+let {
+    variant = 'icon',
+    size = 'md',
+    icon,
+    active = false,
+    animate = true,
+    class: className,
+    ...rest
+}: Props = $props();
+</script>
+
+<Button
+    {variant}
+    {size}
+    {icon}
+    {active}
+    {animate}
+    class={className}
+    {...rest}
+/>