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

Usage

tsx

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

Props

Prop	Type	Default	Description
`reactions`	`Reaction[]`	--	Array of { emoji, count, userReacted }.
`onToggle`	`(emoji: string) => void`	--	Callback when a reaction is toggled.
`onAdd`	`(emoji: string) => void`	--	Callback when the add-reaction button is pressed.
`className`	`string`	--	Additional CSS classes.