<!-- source-hash: b262c529e121e8f3f9e9aa107480cd1a -->
Storybook stories for the `SplitButton` component, showcasing all supported variants, sizes, states, and icon configurations for visual testing and documentation.

## Key Components

| Export | Description |
|--------|-------------|
| `Accent` | Default accent variant with external link icon action |
| `Outline` | Outline variant with new-tab icon action |
| `Transparent` | Transparent variant with new-tab icon action |
| `Destructive` | Destructive variant with trash icon and overflow menu |
| `SizeSmall` | Small size variant demonstration |
| `AsLink` | Button rendered as an anchor (`href`) with icon action |
| `WithLeftIcon` | Main button with a left-side icon and dropdown action |
| `Disabled` | Fully disabled state for the entire component |
| `IconActionDisabled` | Only the secondary icon action is disabled |
| `AllVariants` | Grid showcasing all 4 variants × default/disabled × default/small sizes |
| `TwoActions` | Composite example combining link navigation and dropdown actions |

## Usage Example

```typescript
import { SplitButton } from '../components/ui/button'
import { FloppyDiscIcon as Save, Chevron01DownIcon as ChevronDown } from '../components/icons-v2-generated'

// Main action button with a secondary icon action
<SplitButton
  variant="accent"
  leftIcon={<Save />}
  onClick={() => handleSave()}
  iconAction={{
    icon: <ChevronDown />,
    'aria-label': 'More save options',
    onClick: () => openMenu(),
  }}
>
  Save
</SplitButton>

// Rendered as a link with external open icon action
<SplitButton
  variant="outline"
  href="/docs"
  iconAction={{
    icon: <ExternalLink />,
    'aria-label': 'Open in new tab',
    href: '/docs',
    openInNewTab: true,
  }}
>
  Documentation
</SplitButton>
```

## Controls

| Prop | Type | Options |
|------|------|---------|
| `variant` | select | `accent`, `outline`, `transparent`, `destructive` |
| `size` | select | `default`, `small` |
| `fullWidth` | boolean | — |
| `disabled` | boolean | — |