<!-- source-hash: 74eb7379842105cc594b84564c93e6f2 -->
A selectable button component built with `React.forwardRef` that supports rich content including icons, images, tags, and descriptions, with distinct selected/unselected visual states.

## Key Components

### `SelectButtonProps`
| Prop | Type | Description |
|------|------|-------------|
| `title` | `string` | Required button label |
| `description` | `string` | Optional subtitle (visible on `md+` breakpoints) |
| `selected` | `boolean` | Toggles active/highlighted state |
| `disabled` | `boolean` | Disables interaction and dims the button |
| `icon` | `React.ReactNode` | Optional leading icon |
| `image` | `{ src, alt }` | Optional thumbnail image |
| `tag` | `string` | Optional `Tag` badge label |
| `tagVariant` | `TagProps['variant']` | Badge variant, defaults to `"outline"` |
| `onClick` | `() => void` | Click handler |
| `className` | `string` | Additional CSS overrides |

### `SelectButton`
A forwarded-ref `<button>` with `role="option"` and `aria-selected`, suitable for use inside listbox-style selection UIs. Renders a `CheckCircleIcon` when selected.

## Usage Example

```typescript
import { SelectButton } from './select-button'
import { ServerIcon } from '../icons'

<SelectButton
  title="Production Server"
  description="us-east-1 · 4 vCPU"
  icon={<ServerIcon />}
  image={{ src: "/logos/aws.png", alt: "AWS" }}
  tag="Recommended"
  tagVariant="solid"
  selected={selectedId === 'prod'}
  onClick={() => setSelectedId('prod')}
/>
```

> **Accessibility note:** Wrap multiple `SelectButton` instances in a container with `role="listbox"` to form a complete ARIA listbox pattern.

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