From 5dbebc2b77c8be369bb2947bb4c183428ed7a114 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 24 Feb 2026 18:07:10 +0300
Subject: [PATCH] feat(Button): wrapper arround Button to create toggle
 components

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

diff --git a/src/shared/ui/Button/ToggleButton.svelte b/src/shared/ui/Button/ToggleButton.svelte
new file mode 100644
index 0000000..a935319
--- /dev/null
+++ b/src/shared/ui/Button/ToggleButton.svelte
@@ -0,0 +1,44 @@
+<!--
+    Component: ToggleButton
+    Convenience wrapper that accepts a `selected` prop as an alias for `active`,
+    matching common toggle/radio patterns where the parent owns selection state.
+-->
+<script lang="ts">
+import type { ComponentProps } from 'svelte';
+import Button from './Button.svelte';
+
+type BaseProps = ComponentProps<typeof Button>;
+
+interface Props extends BaseProps {
+    /** Alias for `active`. Takes precedence if both are provided. */
+    selected?: boolean;
+}
+
+let {
+    variant = 'secondary',
+    size = 'md',
+    icon,
+    iconPosition = 'left',
+    selected,
+    active = false,
+    animate = true,
+    children,
+    class: className,
+    ...rest
+}: Props = $props();
+
+// `selected` takes precedence over `active` when explicitly set
+const isActive = $derived(selected !== undefined ? selected : active);
+</script>
+
+<Button
+    {variant}
+    {size}
+    {icon}
+    {iconPosition}
+    active={isActive}
+    {animate}
+    {children}
+    class={className}
+    {...rest}
+/>