feat(Button): wrapper arround Button to create square buttons with icons
This commit is contained in:
37
src/shared/ui/Button/IconButton.svelte
Normal file
37
src/shared/ui/Button/IconButton.svelte
Normal file
@@ -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}
|
||||||
|
/>
|
||||||
Reference in New Issue
Block a user