<!-- source-hash: 289ff1c6a5daf3110837897be5b2e698 -->
A presentational thumbs-up/thumbs-down vote button component used within `RoadmapCard`'s default variant. Delegates all interaction logic to the parent via an `onClick` prop.

## Key Components

### `RoadmapVoteButton`

The sole export — a styled `Button` wrapper that renders either a `ThumbsUpIcon` or `ThumbsDownIcon` based on `voteType`, with optional vote count display and active/disabled states.

### `RoadmapVoteButtonProps`

| Prop | Type | Default | Description |
|---|---|---|---|
| `voteType` | `'up' \| 'down'` | — | Determines which icon to render |
| `count` | `number` | — | Vote count displayed alongside the icon |
| `isActive` | `boolean` | — | Applies active background styling when the user has voted |
| `onClick` | `() => void` | — | Click handler; typically wired from a `useRoadmapVoting` hook |
| `disabled` | `boolean` | `false` | Prevents interaction and applies reduced opacity |
| `showCount` | `boolean` | `true` | Toggles visibility of the vote count label |
| `color` | `string` | — | Optional color override passed to the icon |
| `className` | `string` | — | Additional classes merged via `cn()` |

## Usage Example

```typescript
import { RoadmapVoteButton } from './roadmap-vote-button'

function RoadmapCard({ item }) {
  const { upvoteCount, hasUpvoted, handleUpvote } = useRoadmapVoting(item.id)

  return (
    <RoadmapVoteButton
      voteType="up"
      count={upvoteCount}
      isActive={hasUpvoted}
      onClick={handleUpvote}
      disabled={!isAuthenticated}
    />
  )
}
```

## Notes

- Pure presentational component — no internal state or data fetching.
- Active state (`isActive`) applies `bg-ods-border` styling to visually distinguish a cast vote.
- Uses the `cn()` utility for conditional class merging; all ODS design tokens (`ods-bg`, `ods-border`) follow the OpenFrame Design System conventions.

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