Emoji reaction pills with counts for comments, posts and messages: pressing a pill adds or removes your own reaction, with a small burst of particles as it lands and the count rolling up or down from the side it moves toward. Hovering or focusing a pill names who reacted ("You, Nina Simone and 9 others"), and a "+" button opens a compact emoji grid for a new reaction, which arrives as a pill of its own. Each pill is a real toggle button with `aria-pressed` and a spoken label, and it works controlled or uncontrolled.
The import and the props worth knowing about, in one place.
import { ReactionBar } from "@/components/beste/component/reaction-bar";
<ReactionBar
reactions={[
{ emoji: "🔥", count: 12, by: ["Nina Simone", "Miles Davis"] },
{ emoji: "❤️", count: 7 },
]}
defaultValue={["❤️"]}
/>
// Controlled, saving each change
<ReactionBar
reactions={reactions}
value={mine}
onValueChange={(next) => console.log("Save reactions", next)}
choices={["👍", "❤️", "🎧"]} // what the "+" button offers; [] hides it
maxNames={2} // names in the tooltip before "and N others"
tone="outline" // "muted" | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Tab | Move between the pills and the "+" button. |
|---|---|
| Enter / Space | Add or remove your reaction on the focused pill, or open the emoji grid. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
reactions* | Reaction[] | — | |
value | string[] | — | Emojis you have reacted with (controlled). |
defaultValue | string[] | — | Emojis you have reacted with at first (uncontrolled). |
onValueChange | (value: string[]) => void | — | |
choices | string[] | a set of 16 common reactions | Emojis offered by the "+" button. An empty list hides it. |
youLabel | string | "You" | Word used for you in the tooltip. |
maxNames | number | 3 | Names listed in a tooltip before "and N others". |
tone | "muted" | "outline" | "ghost" | "muted" | |
size | "sm" | "default" | "lg" | "default" | |
className | string | — | |
aria-label | string | — | Accessible name for the group. |