A chevron over a count. Voting inverts the tile and rolls the count up by one.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/vote-buttonPlayground
Default
Voted
Disabled
Icons animation
Disabled
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/vote-button
Accessibility
- A toggle button with aria-pressed.
- The name says what the vote is for and gives the current count.
Motion
- The tile inverts in 120 ms and digits roll to the new count.
- Press scales to 0.98.
- With reduced motion, digits swap and there is no press scale.
Responsive behavior
- 44 px wide on Web and 48 px on Mobile.
Performance
- One button with no timers. Press and the rolling count run only on interaction.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import VoteButton. Props: count, label, voted or defaultVoted, onVotedChange, disabled, animated.
- count is the total before this person's vote. The component adds one while voted.
- label names what the vote is for and becomes the accessible name with the count.
- State is local in the demo. Save the vote in onVotedChange.
Related
Feature VotingComponentA feature request board. Compact is a short top list, Board adds descriptions, categories and authors.RatingComponentFive stars with a label and value. Hover previews up to the pointer.ToggleComponentA button that stays pressed.Feedback PromptComponentA yes or no question. Yes opens a note, No adds reason chips, and sending says thanks.