Reaction Bar

A Slack-style emoji reaction bar with animated chips and rolling counts.

@spectrumui/reaction-bar

Aisha Khan2:14 PM

Just shipped the new onboarding flow — would love your feedback before Friday!

Installation

Usage

import { ReactionBar } from "@/components/spectrumui/reaction-bar"

<ReactionBar
  defaultReactions={[
    { emoji: "👍", count: 3, reacted: true },
    { emoji: "🎉", count: 1 },
  ]}
  onReactionsChange={(reactions) => console.log(reactions)}
/>

API Reference

ReactionBar

Renders a row of reaction chips, each a button with aria-pressed reflecting whether you have reacted. Reactions use the exported Reaction type: { emoji: string; count: number; reacted?: boolean }. Pass reactions to control the list from outside, or defaultReactions to let it manage its own state. Toggling a chip adjusts its count by one, and a chip whose count reaches zero is removed.

Prop	Type	Default	Description
`reactions`	`Reaction[]`	-	Controlled reactions. Leave undefined for uncontrolled usage
`defaultReactions`	`Reaction[]`	`[]`	Initial reactions when uncontrolled
`onReactionsChange`	`(reactions: Reaction[]) => void`	-	Fires with the next reactions array on every change
`availableEmojis`	`string[]`	`["👍", "❤️", "😂", "🎉", "😮", "🚀"]`	Emojis offered in the add popover
`addable`	`boolean`	`true`	Show the plus button that opens the emoji popover
`size`	`"sm" \| "md"`	`"md"`	Visual size of the chips
`className`	`string`	-	Additional classes merged with the default container styles

Examples

Controlled and read-only

Controlled — 15 total reactions

Small size with the add button disabled