Flexible, multi-variant button component supporting standard buttons, links, split-icon layouts, and loading states via a unified `Button` interface. ## Key Components - **`buttonVariants`** — CVA variant map defining styles for `variant` (`accent`, `outline`, `transparent`, `destructive`, `warning`), `size` (`default`, `small`, `small-legacy`, `compact`, `icon`, `icon-sm`), `fullWidth`, and `noPaddingX`. - **`splitShellVariants` / `splitSlotVariants`** — CVA helpers for the split-icon layout, where a vertical divider separates main content from a trailing icon area within a single click target. - **`Spinner`** — Internal SVG spinner rendered absolutely during `loading` state, preserving button dimensions. - **`Button`** — Primary export. A `forwardRef` component that auto-selects rendering strategy: `` (`asChild`), `` (`href` / `linkProps`), split layout (`splitIcon`), or a plain ``. ## Props | Prop | Type | Notes | |---|---|---| | `variant` | `accent` \| `outline` \| `transparent` \| `destructive` \| `warning` | Defaults to `accent` | | `size` | `default` \| `small` \| `compact` \| `icon` \| `icon-sm` | `small-legacy` deprecated | | `href` / `linkProps` | `string` / object | Renders as ``; `linkProps` wins over `href` | | `splitIcon` | `ReactNode` | Triggers split layout (default/small sizes only) | | `loading` | `boolean` | Hides content, shows spinner; implies `disabled` | | `asChild` | `boolean` | Delegates rendering to child via Radix `Slot` | ## Usage Example ```typescript // Standard accent button with loading state Save Changes // Link button with split icon } variant="outline"> Dashboard // Icon-only ghost button // Render as child (asChild) Learn More ``` **Source:** [`button.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/button.tsx)