Component

Reaction Bar

Emoji reaction pills with counts and toggle state. Click to react or unreact. Uses the headless @refraction-ui/reaction-bar core.

Examples

Click reactions to toggle them.

Installation

$pnpm add @refraction-ui/react-reaction-bar

Usage

tsx

import { ReactionBar } from '@refraction-ui/react-reaction-bar'
export function MyComponent() {
  return (
    <ReactionBar
      reactions={[{ emoji: '👍', count: 5, reacted: false }]}
      onReact={(emoji) => console.log(emoji)}
    />
  )
}

Props

Prop	Type	Default	Description
`reactions`	`Reaction[]`	--	Array of { emoji, count, reacted }.
`onReact`	`(emoji: string) => void`	--	Callback when a reaction is toggled.
`className`	`string`	--	Additional CSS classes.