<!-- source-hash: 12ec98968857443cbefad0230bd2d335 -->
A client-side React button component that renders a branded "Start with OpenFrame" CTA button, supporting five visual modes with the OpenFrame logo icon and a "Beta" status badge.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `StartWithOpenFrameButton` | `React.ForwardRefExoticComponent` | Main button component with OpenFrame branding |
| `StartWithOpenFrameButtonProps` | `interface` | Extends `ButtonProps`, omitting `variant`, `size`, and `leftIcon` |

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `mode` | `'outline' \| 'yellow' \| 'pink' \| 'purple' \| 'cyan'` | `'outline'` | Visual color mode |
| `buttonSize` | `'sm' \| 'md' \| 'lg'` | — | Maps to internal Button size tokens |
| `loading` | `boolean` | `false` | Shows loading state, hides the OpenFrame icon |
| `buttonBackgroundColor` | `string` | — | Custom background override (cyan mode only) |
| `buttonTextColor` | `string` | — | Custom text color override (cyan mode only) |
| `children` | `React.ReactNode` | `'Start Free Trial'` | Button label |

### Mode Behavior

| Mode | Variant | Background Token |
|------|---------|-----------------|
| `outline` | `outline` | Default outline style |
| `yellow` | `accent` | `--ods-open-yellow-base` |
| `pink` / `purple` | `accent` | `--ods-flamingo-pink-base` |
| `cyan` | `accent` | `--ods-flamingo-cyan-base` |

## Usage Example

```typescript
import { StartWithOpenFrameButton } from './start-with-openframe-button';

// Default outline mode
<StartWithOpenFrameButton onClick={() => router.push('/signup')} />

// Yellow accent, large size
<StartWithOpenFrameButton mode="yellow" buttonSize="lg">
  Get Started
</StartWithOpenFrameButton>

// Cyan with custom brand colors
<StartWithOpenFrameButton
  mode="cyan"
  buttonBackgroundColor="#00BCD4"
  buttonTextColor="#000000"
/>

// Loading state
<StartWithOpenFrameButton loading={isSubmitting} />
```