feat(Button): wrapper arround Button to create toggle components
This commit is contained in:
44
src/shared/ui/Button/ToggleButton.svelte
Normal file
44
src/shared/ui/Button/ToggleButton.svelte
Normal 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}
|
||||
/>
|
||||
Reference in New Issue
Block a user