From d36ab3c993b27a5c57cb451e19439efddb3edd07 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 24 Feb 2026 17:58:56 +0300
Subject: [PATCH] feat(Button): shared button component with different sizes
 and variants

---
 src/shared/ui/Button/Button.stories.svelte | 120 +++++++++++++
 src/shared/ui/Button/Button.svelte         | 185 +++++++++++++++++++++
 2 files changed, 305 insertions(+)
 create mode 100644 src/shared/ui/Button/Button.stories.svelte
 create mode 100644 src/shared/ui/Button/Button.svelte

diff --git a/src/shared/ui/Button/Button.stories.svelte b/src/shared/ui/Button/Button.stories.svelte
new file mode 100644
index 0000000..990177c
--- /dev/null
+++ b/src/shared/ui/Button/Button.stories.svelte
@@ -0,0 +1,120 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import Button from './Button.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/Button',
+    component: Button,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: '',
+            },
+            story: { inline: false },
+        },
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['primary', 'secondary', 'icon', 'outline', 'ghost'],
+            defaultValue: 'secondary',
+        },
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            defaultValue: 'md',
+        },
+        iconPosition: {
+            control: 'select',
+            options: ['left', 'right'],
+            defaultValue: 'left',
+        },
+        active: {
+            control: 'boolean',
+            defaultValue: false,
+        },
+        animate: {
+            control: 'boolean',
+            defaultValue: true,
+        },
+    },
+});
+</script>
+
+<script lang="ts">
+import XIcon from '@lucide/svelte/icons/x';
+import ButtonGroup from './ButtonGroup.svelte';
+</script>
+
+<Story
+    name="Default/Basic"
+    parameters={{ docs: { description: { story: 'Standard text button at all sizes' } } }}
+>
+    {#snippet template(args)}
+        <ButtonGroup>
+            <Button {...args} size="xs">xs</Button>
+            <Button {...args} size="sm">sm</Button>
+            <Button {...args} size="md">md</Button>
+            <Button {...args} size="lg">lg</Button>
+            <Button {...args} size="xl">xl</Button>
+        </ButtonGroup>
+    {/snippet}
+</Story>
+
+<Story
+    name="Default/With Icon"
+    args={{ variant: 'secondary', size: 'md', iconPosition: 'left', active: false, animate: true }}
+>
+    {#snippet template(args)}
+        <Button {...args}>
+            {#snippet icon()}
+                <XIcon />
+            {/snippet}
+            Close
+        </Button>
+    {/snippet}
+</Story>
+
+<Story
+    name="Primary"
+    args={{ variant: 'primary', size: 'md', iconPosition: 'left', active: false, animate: true }}
+>
+    {#snippet template(args)}
+        <Button {...args}>Primary</Button>
+    {/snippet}
+</Story>
+
+<Story
+    name="Secondary"
+    args={{ variant: 'secondary', size: 'md', iconPosition: 'left', active: false, animate: true }}
+>
+    {#snippet template(args)}
+        <Button {...args}>Secondary</Button>
+    {/snippet}
+</Story>
+
+<Story
+    name="Icon"
+    args={{ variant: 'icon', size: 'md', iconPosition: 'left', active: false, animate: true }}
+>
+    {#snippet template(args)}
+        <Button {...args}>
+            {#snippet icon()}
+                <XIcon />
+            {/snippet}
+        </Button>
+    {/snippet}
+</Story>
+
+<Story
+    name="Ghost"
+    args={{ variant: 'ghost', size: 'md', iconPosition: 'left', active: false, animate: true }}
+>
+    {#snippet template(args)}
+        <Button {...args}>
+            Ghost
+        </Button>
+    {/snippet}
+</Story>
diff --git a/src/shared/ui/Button/Button.svelte b/src/shared/ui/Button/Button.svelte
new file mode 100644
index 0000000..ec1c5c8
--- /dev/null
+++ b/src/shared/ui/Button/Button.svelte
@@ -0,0 +1,185 @@
+<!--
+    Component: Button
+    design-system button. Uppercase, zero border-radius, Space Grotesk.
+-->
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type {
+    ButtonSize,
+    ButtonVariant,
+    IconPosition,
+} from './types';
+
+interface Props extends HTMLButtonAttributes {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Svelte snippet rendered as the icon. */
+    icon?: Snippet;
+    iconPosition?: IconPosition;
+    active?: boolean;
+    /**
+     * When true (default), adds `active:scale-[0.97]` on tap via CSS.
+     * Primary variant is excluded from scale — it shifts via translate instead.
+     */
+    animate?: boolean;
+    children?: Snippet;
+    class?: string;
+}
+
+let {
+    variant = 'secondary',
+    size = 'md',
+    icon,
+    iconPosition = 'left',
+    active = false,
+    animate = true,
+    children,
+    class: className,
+    type = 'button',
+    disabled,
+    ...rest
+}: Props = $props();
+
+// Square sizing when icon is present but there is no text label
+const isIconOnly = $derived(!!icon && !children);
+
+// ── Variant base styles ──────────────────────────────────────────────────────
+const variantStyles: Record<ButtonVariant, string> = {
+    primary: cn(
+        'bg-swiss-red text-white',
+        'hover:bg-swiss-red/90',
+        'active:bg-swiss-red/80',
+        'border border-swiss-red',
+        'shadow-[0.125rem_0.125rem_0_0_rgba(0,0,0,0.1)]',
+        'hover:shadow-[0.1875rem_0.1875rem_0_0_rgba(0,0,0,0.15)]',
+        'active:shadow-[0.0625rem_0.0625rem_0_0_rgba(0,0,0,0.08)]',
+        'active:translate-x-[0.0625rem] active:translate-y-[0.0625rem]',
+        'disabled:bg-neutral-300 dark:disabled:bg-neutral-700',
+        'disabled:text-neutral-500 dark:disabled:text-neutral-500',
+        'disabled:border-neutral-300 dark:disabled:border-neutral-700',
+        'disabled:shadow-none',
+        'disabled:cursor-not-allowed',
+        'disabled:transform-none',
+    ),
+    secondary: cn(
+        'bg-surface dark:bg-paper',
+        'text-swiss-black dark:text-neutral-200',
+        'border border-black/10 dark:border-white/10',
+        'hover:bg-paper dark:hover:bg-neutral-800',
+        'hover:shadow-sm',
+        'active:bg-neutral-100 dark:active:bg-neutral-700',
+        'disabled:bg-neutral-100 dark:disabled:bg-neutral-800',
+        'disabled:text-neutral-400 dark:disabled:text-neutral-600',
+        'disabled:cursor-not-allowed',
+    ),
+    outline: cn(
+        'bg-transparent',
+        'text-swiss-black dark:text-neutral-200',
+        'border border-black/20 dark:border-white/20',
+        'hover:bg-surface dark:hover:bg-paper',
+        'hover:border-brand',
+        'active:bg-paper dark:active:bg-neutral-700',
+        'disabled:border-neutral-300 dark:disabled:border-neutral-700',
+        'disabled:text-neutral-400 dark:disabled:text-neutral-600',
+        'disabled:cursor-not-allowed',
+    ),
+    ghost: cn(
+        'bg-transparent',
+        'text-neutral-500 dark:text-neutral-400',
+        'border border-transparent',
+        'hover:bg-paper dark:hover:bg-paper',
+        'hover:text-swiss-black dark:hover:text-neutral-200',
+        'hover:border-black/5 dark:hover:border-white/5',
+        'active:bg-surface dark:active:bg-neutral-700',
+        'disabled:text-neutral-400 dark:disabled:text-neutral-600',
+        'disabled:cursor-not-allowed',
+    ),
+    icon: cn(
+        'bg-surface dark:bg-dark-bg',
+        'text-neutral-500 dark:text-neutral-400',
+        'border border-transparent',
+        'hover:bg-paper dark:hover:bg-paper',
+        'hover:text-brand',
+        'hover:border-black/5 dark:hover:border-white/10',
+        'active:bg-paper dark:active:bg-neutral-700',
+        'disabled:text-neutral-400 dark:disabled:text-neutral-600',
+        'disabled:cursor-not-allowed',
+    ),
+};
+
+// ── Size styles ───────────────────────────────────────────────────────────────
+const sizeStyles: Record<ButtonSize, string> = {
+    xs: 'h-6  px-2 text-[9px]  gap-1',
+    sm: 'h-8  px-3 text-[10px] gap-1.5',
+    md: 'h-10 px-4 text-[11px] gap-2',
+    lg: 'h-12 px-6 text-[12px] gap-2',
+    xl: 'h-14 px-8 text-[13px] gap-2.5',
+};
+
+// Square padding for icon-only mode
+const iconSizeStyles: Record<ButtonSize, string> = {
+    xs: 'h-6  w-6  p-1',
+    sm: 'h-8  w-8  p-1.5',
+    md: 'h-10 w-10 p-2',
+    lg: 'h-12 w-12 p-2.5',
+    xl: 'h-14 w-14 p-3',
+};
+
+// ── Active state overrides (per variant) ─────────────────────────────────────
+const activeStyles: Partial<Record<ButtonVariant, string>> = {
+    secondary: 'bg-paper dark:bg-paper shadow-sm border-black/20 dark:border-white/20',
+    ghost: 'bg-paper dark:bg-paper text-swiss-black dark:text-neutral-200',
+    outline: 'bg-surface dark:bg-paper border-brand',
+    icon: 'bg-paper dark:bg-paper text-brand border-black/5 dark:border-white/10',
+};
+
+const classes = $derived(cn(
+    // Base
+    'inline-flex items-center justify-center',
+    'font-["Space_Grotesk"] font-bold tracking-tight uppercase',
+    'rounded-none',
+    'transition-all duration-200',
+    'select-none',
+    'outline-none',
+    'focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2',
+    'focus-visible:ring-offset-surface dark:focus-visible:ring-offset-dark-bg',
+    'disabled:cursor-not-allowed disabled:pointer-events-none',
+    // Variant
+    variantStyles[variant],
+    // Size (square when icon-only)
+    isIconOnly ? iconSizeStyles[size] : sizeStyles[size],
+    // Animate (CSS tap scale — excluded for primary which uses translate instead)
+    animate && !disabled && variant !== 'primary' && 'active:scale-[0.97]',
+    // Active override
+    active && activeStyles[variant],
+    // Consumer override
+    className,
+));
+</script>
+
+<button
+    {type}
+    {disabled}
+    class={classes}
+    {...rest}
+>
+    {#if icon && iconPosition === 'left'}
+        <span class="shrink-0 flex items-center justify-center">
+            {@render icon()}
+        </span>
+    {/if}
+
+    {#if children}
+        <span class="whitespace-nowrap leading-none">
+            {@render children()}
+        </span>
+    {/if}
+
+    {#if icon && iconPosition === 'right'}
+        <span class="shrink-0 flex items-center justify-center">
+            {@render icon()}
+        </span>
+    {/if}
+</button>