Storybook stories for the `SplitButton` component, covering all visual variants, sizes, states, and interaction patterns available in the UI library. ## Key Components | Export | Description | |---|---| | `Accent` | Default accent-colored split button with external link icon action | | `Outline` | Outline-styled split button with new-tab action | | `Transparent` | Ghost-style split button | | `Destructive` | Red destructive variant with trash icon and overflow menu | | `Warning` | Warning variant for cautious actions | | `SizeSmall` | Compact `small` size variant | | `AsLink` | Main button rendered as an anchor (`href`) | | `WithLeftIcon` | Split button with a leading icon on the primary label | | `Disabled` | Fully disabled state | | `IconActionDisabled` | Only the secondary icon action is disabled | | `AllVariants` | Grid rendering all 5 variants × 2 sizes × enabled/disabled | | `TwoActions` | Side-by-side real-world usage examples | **Shared action presets:** - `newTabAction` — icon action that navigates to an external URL in a new tab - `dropdownAction` — icon action that triggers a dropdown menu callback ## Usage Example ```typescript import { SplitButton } from '../components/ui/button' import { FloppyDiscIcon as Save, Chevron01DownIcon as ChevronDown } from '../components/icons-v2-generated' // Primary action + secondary dropdown toggle } onClick={() => handleSave()} iconAction={{ icon: , 'aria-label': 'Save options', onClick: () => openSaveMenu(), }} > Save // Link-based split button opening a new tab , 'aria-label': 'Open in new tab', href: '/docs', openInNewTab: true, }} > Documentation ``` **Source:** [`SplitButton.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/SplitButton.stories.tsx)