# ReactionBar

> Quick emoji reactions with their counts; the reader's own stands out.

- **Level**: molecule · **Status**: experimental (R15: may change or be removed; J-11) · **Role**: action
- **Import**: `import { ReactionBar } from "@rrios-forge/ui/molecules/reaction-bar";`
- **Source**: `packages/ui/src/molecules/reaction-bar`

Controlled reaction bar. Pass `reactions` (key + glyph + label + count), the `active` key, and `onToggle`. Each option is a Button atom — active → intent primary solid, idle → neutral ghost. The consumer owns toggle semantics (add / replace / remove) and optimistic state. Patterns consulted: Patterns/Visual Priority · StatusHierarchy.

## Use it for

- Chat message / reactions → `ChatBubble` / `ReactionBar`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `size` | — | `sm` `md` | `sm` | Ergonomic scale, in three families (control, text, container). |

## Stories

- [Playground](/?path=/story/components-molecules-reactionbar--playground) · frame: `/iframe.html?id=components-molecules-reactionbar--playground&viewMode=story`
- [Nothing selected](/?path=/story/components-molecules-reactionbar--no-active) · frame: `/iframe.html?id=components-molecules-reactionbar--no-active&viewMode=story`
- [Disabled](/?path=/story/components-molecules-reactionbar--disabled) · frame: `/iframe.html?id=components-molecules-reactionbar--disabled&viewMode=story`
- [Multi-active (array)](/?path=/story/components-molecules-reactionbar--multi-active) · frame: `/iframe.html?id=components-molecules-reactionbar--multi-active&viewMode=story`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).