Reactions

A reaction bar for comments, posts and release notes: one tap acknowledges, counts roll as they change, and the add button opens a compact picker that grows from it.

When to use

• Quick acknowledgement under comments, announcements, changelog entries and chat messages.
• When you want the viewer's own reactions clearly marked (they carry the accent) and counts that update in place.
• When people need to say something specific, give them a reply field instead. For a single like toggle, an IconMorph heart in a button is lighter.

Usage

import { Reactions } from "@/components/iris/reactions/reactions";
import { ThumbsUp, Heart, Eye, Check } from "lucide-react";

const options = [
  { id: "thumbs", label: "Thumbs up", icon: ThumbsUp },
  { id: "heart", label: "Love", icon: Heart },
  { id: "eyes", label: "Looking", icon: Eye },
  { id: "done", label: "Done", icon: Check },
];

<Reactions
  options={options}
  value={reactions}
  onValueChange={(next, change) => {
    setReactions(next);
    api.react(postId, change);
  }}
  label="Reactions to this comment"
/>;

Props

Prop	Type	Default	Description
options	{ id, label, icon: LucideIcon }[]	—	Every reaction the picker offers, in picker order (required). icon is a component type that receives size and strokeWidth.
value	{ id, count, reacted }[]	—	Controlled reactions. Pills keep this order; a reaction whose count reaches zero leaves the bar.
defaultValue	{ id, count, reacted }[]	[]	Starting reactions when uncontrolled.
onValueChange	(next, change: { id, reacted }) => void	—	Called with the next reactions and the change that produced them.
label	string	"Reactions"	Accessible name of the bar.
className	string	—	Extra class on the root.

Notes

• Each pill is a toggle with aria-pressed and a full label ("Love, 4 reactions, including yours"). The picker is a Radix popover labelled "Add a reaction", laid out as a role="toolbar" with a roving tab stop and Home/End; a caption names the highlighted option.
• The add button anchors the picker and answers a press with colour, never scale. The picker opens above the bar (side="top"), so leave room or let it collide-flip.
• Icons get an impulse "kick" on react; counts roll in the direction they moved. Reduced motion uses fades only.
• No emoji are required: any lucide-style icon component works, which keeps reactions on-brand.