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}
+/>