Storybook stories for the `Button` component, covering all variants, sizes, states, icon configurations, and link behaviors used in the OpenFrame UI library. ## Key Components | Export | Description | |---|---| | `Accent`, `Outline`, `Transparent`, `Destructive`, `Warning` | Individual variant stories | | `SizeDefault`, `SizeSmall`, `SizeCompact` | Size variant stories | | `IconOnly`, `WithLeftIcon`, `WithRightIcon`, `WithBothIcons` | Icon placement stories | | `Disabled`, `Loading`, `FullWidth` | State stories | | `SplitIcon`, `SplitIconOutline`, `SplitIconAsLink`, `SplitIconSmall` | Split icon button stories | | `AsLink`, `ExternalLink` | Anchor/navigation stories | | `AllVariants`, `AllSizes`, `IconButtonGrid`, `WithIconsShowcase`, `StatesShowcase`, `NotificationCounters` | Composite showcase stories | ## Usage Example ```typescript // Individual story — renders an accent button export const Accent: Story = { args: { children: 'Button', variant: 'accent' }, }; // Composite showcase — renders all variants in normal, disabled, and loading states export const AllVariants: Story = { args: { children: 'Button' }, render: () => { const variants = ['accent', 'outline', 'transparent', 'destructive', 'warning'] as const; return (

{variants.map((variant) => ( ))}

); }, }; ``` ## Controlled Args The Storybook `argTypes` panel exposes interactive controls for `variant` (`accent` | `outline` | `transparent` | `destructive` | `warning`), `size` (`default` | `small` | `compact` | `icon`), `fullWidth`, `disabled`, and `loading`. **Source:** [`Button.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/Button.stories.tsx)