feat(Button): wrapper arround Button to create toggle components

This commit is contained in:
Ilia Mashkov
2026-02-24 18:07:10 +03:00
parent 98101217db
commit 5dbebc2b77

View File

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