# Vote button (goodtabs UI)

An upvote toggle with its count in one outline pill that turns solid when pressed.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/vote-button.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/vote-button`

## Usage

```tsx
import { VoteButton } from "@/components/ui/vote-button"

<VoteButton count={128} onPressedChange={(pressed) => save(post.id, pressed)} />
<VoteButton count={412} orientation="vertical" defaultPressed />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| count | `number` |  | Votes before the viewer's own. One is added while pressed. |
| pressed | `boolean` |  | Controlled pressed state. Leave out to let the button manage it. |
| defaultPressed | `boolean` | `false` | Pressed state on first render when uncontrolled. |
| onPressedChange | `(pressed: boolean) => void` |  | Called with the next pressed state on every toggle. |
| orientation | `"horizontal" | "vertical"` | `"horizontal"` | Chevron beside the count, or above it. |
| size | `"sm" | "default"` | `"default"` | 28px or 32px tall. Vertical grows to fit. |
| label | `string` | `"Upvote"` | Accessible name read before the count. |

## When to use

- Next to posts, comments or feature requests where one vote per person is the model
- In a feed with the vertical orientation so the count lines up down the left edge
- When the pressed state must read at a glance, in both themes

## When not to use

- For likes with no count, use a plain toggle
- For up and down voting, which needs two controls and a net score
- As a counter that people can press more than once

## Notes for agents

- count is the total without the viewer's vote; the button adds one while pressed, so pass the stored count as is
- Controlled with pressed and onPressedChange, or uncontrolled with defaultPressed; the demo that passes a handler is a client component
- Pressed renders shadcn's default button variant, unpressed the outline one, so both follow the consumer's theme
- The count is formatted with Intl.NumberFormat in en-US; wrap it if you need another locale

Docs: https://ui.goodtabs.co/components/vote-button