<!-- source-hash: e7990b46fb9187b4eebc186c31d83f16 -->
A branded CTA button component for the OpenFrame platform, rendering the OpenFrame logo icon alongside customizable label text and a "Beta" status badge.

## Key Components

### `StartWithOpenFrameButtonProps`
Extends `ButtonProps` (omitting `variant`, `size`, and `leftIcon`) with:

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

### `StartWithOpenFrameButton`
A `React.forwardRef` component that:
- Maps `mode` to `Button` variant (`outline` or `accent`) and ODS Tailwind classes
- Adjusts `OpenFrameLogo` icon colors for contrast per mode
- Injects a fixed `StatusBadge` ("Beta") as `rightIcon`
- Supports inline style overrides for the `cyan` mode

## Usage Example

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

// Default outline style
<StartWithOpenFrameButton />

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

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

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

> **Source:** [`start-with-openframe-button.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/start-with-openframe-button.tsx)