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