# Reaction Bar

> Reaction counts and selected states with accessible names.

- Category: Content
- Kind: component
- Page: https://uaiblocks.dev/components/reaction-bar
- Registry item: https://uaiblocks.dev/r/reaction-bar.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/reaction-bar.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/reaction-bar.json
```

## Usage

```tsx
"use client";

import { useState } from "react";
import {
  ReactionBar,
  ReactionBarItem,
  ReactionBarPicker,
  ReactionBarPickerOption,
  type ReactionBarVariant,
} from "@/components/ui/uai/reaction-bar";

const reactions = [
  { value: "thumbs-up", emoji: "👍", label: "Thumbs up", count: 12 },
  { value: "heart", emoji: "❤️", label: "Heart", count: 5 },
  { value: "rocket", emoji: "🚀", label: "Rocket", count: 3 },
  { value: "eyes", emoji: "👀", label: "Eyes", count: 0 },
  { value: "party", emoji: "🎉", label: "Party", count: 0 },
];

export function ReactionBarPreview({ variant = "pill" }: { variant?: ReactionBarVariant }) {
  const [selected, setSelected] = useState<string[]>(["heart"]);
  return (
    <ReactionBar
      variant={variant}
      aria-label="Reactions to this release note"
      value={selected}
      onValueChange={setSelected}
    >
      {reactions.map((reaction) => {
        const count = reaction.count + (selected.includes(reaction.value) ? 1 : 0);
        if (count === 0) return null;
        return (
          <ReactionBarItem
            key={reaction.value}
            value={reaction.value}
            emoji={reaction.emoji}
            label={reaction.label}
            count={count}
          />
        );
      })}
      <ReactionBarPicker>
        {reactions.map((reaction) => (
          <ReactionBarPickerOption
            key={reaction.value}
            value={reaction.value}
            emoji={reaction.emoji}
            label={reaction.label}
          />
        ))}
      </ReactionBarPicker>
    </ReactionBar>
  );
}
```

## Anatomy

- `ReactionBar`
  - `ReactionBarItem`
  - `ReactionBarPicker`
    - `ReactionBarPickerOption`

## Accessibility

- Each reaction is a toggle button with aria-pressed and a name that includes the reaction and its count.
- The add-reaction picker is an APG menu button: arrows, Home, End, Escape, and Tab move or close focus.
- Picker options are menuitemcheckbox elements that report whether the reaction is already selected.