<!-- source-hash: da7a4cc8d96ad03653cebb8d1ec11d45 -->
Storybook stories for the `Button` UI component, covering all variants, sizes, states, icon configurations, and link behaviors with interactive controls.

## Key Components

| Story | Description |
|---|---|
| `Accent` / `Outline` / `Transparent` / `Destructive` | Surface variant stories |
| `SizeDefault` / `SizeSmall` | Size variant stories |
| `IconOnly` / `WithLeftIcon` / `WithRightIcon` / `WithBothIcons` | Icon placement stories |
| `Disabled` / `Loading` / `FullWidth` | State stories |
| `SplitIcon` / `SplitIconOutline` / `SplitIconSmall` / `SplitIconAsLink` | Split-icon button variations |
| `AsLink` / `ExternalLink` | Button rendered as anchor tag |
| `AllVariants` / `AllSizes` / `IconButtonGrid` / `WithIconsShowcase` / `StatesShowcase` / `NotificationCounters` | Showcase/grid stories |

**Controls exposed via `argTypes`:** `variant`, `size`, `fullWidth`, `disabled`, `loading`

## Usage Example

```typescript
// Minimal interactive story with controls
import { Button } from '../components/ui/button';

export const MyStory: Story = {
  args: {
    children: 'Click me',
    variant: 'accent',
    size: 'default',
    loading: false,
    disabled: false,
  },
};

// Split-icon button as a navigation link
export const SplitNav: Story = {
  args: {
    children: 'Docs',
    href: '/docs',
    splitIcon: <ExternalLinkIcon />,
    variant: 'outline',
  },
};

// Icon-only with accessible label
export const IconAction: Story = {
  args: {
    size: 'icon',
    variant: 'destructive',
    leftIcon: <Trash2 />,
    'aria-label': 'Delete item',
  },
};
```