A dual-interactive button component that renders two independent clickable halves — a main action half and an icon half — separated by a 1px variant-colored divider seam. ## Key Components ### `SplitButton` (default export) A `React.forwardRef` component wrapping both halves in a `role="group"` div. Each half independently supports button or link (``) rendering. ### `Half` (internal) Renders either a Next.js `` or a `` depending on whether an `href` is provided. Applies `splitHalfVariants` CVA classes for consistent styling. ### `splitHalfVariants` CVA configuration controlling appearance via: - **`variant`**: `accent` | `outline` | `transparent` | `destructive` | `warning` - **`size`**: `default` | `small` - **`side`**: `main` | `icon` (controls rounding and divider border) - **`soloOnMobile`**: hides the icon half on small screens when `iconAction.openInNewTab` is `true` ## Key Props | Prop | Type | Description | |------|------|-------------| | `iconAction` | `SplitButtonIconAction` | Required. Icon half config (icon, aria-label, href/onClick) | | `variant` | `SplitButtonVariant` | Visual style; defaults to `"accent"` | | `disabled` | `boolean` | Disables both halves | | `mainDisabled` | `boolean` | Disables only the main half | | `fullWidth` | `boolean` | Stretches the main half; icon half stays fixed-width | | `openInNewTab` | `boolean` | Opens main link in new tab; also triggers `soloOnMobile` | ## Usage Example ```typescript import { SplitButton } from "./split-button" import { ChevronDownIcon, ExternalLinkIcon } from "lucide-react" // Button + icon-action as two independent targets handleSave()} iconAction={{ icon: , "aria-label": "More save options", onClick: () => openDropdown(), }} > Save // Link main half + new-tab icon half (icon hides on mobile) , "aria-label": "Open in new tab", href: "/dashboard", openInNewTab: true, }} groupAriaLabel="Dashboard navigation" > Dashboard ``` > **Note:** For a single-target button with a decorative trailing icon, use `` instead. `SplitButton` is specifically for two independently interactive halves. **Source:** [`split-button.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/split-button.tsx)