Reaction Bar
Emoji reaction chips with counts showing active and inactive states, an add reaction affordance, and a static hover panel listing who reacted.
Emoji reaction chips with counts showing active and inactive states, an add reaction affordance, and a static hover panel listing who reacted.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Reaction Bar shows the lightweight emoji feedback strip below a feed post from Avery Stone announcing an 18-point conversion lift after shipping the new onboarding flow. Five reaction chips sit beneath the post body: thumbs up at 5 (active, meaning you already reacted), celebration at 3, fire at 2 (also active), eyes at 1, and heart at 4, plus an add-reaction affordance. Each chip exposes a static hover panel listing the avatars and the person count who reacted with that emoji.
Reactions are one typed array with an active flag and a who array of avatar components. The hover tooltip renders as a static div using group-hover visibility, which works inside the preview iframe without a Radix Tooltip portal.
Reach for this block below any feed post, message, or document paragraph, wired to your reactions endpoint. The active flag should reflect the current user session; the add-reaction button opens your emoji picker.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the team feed post reaction strip. Other reaction bar placements:
Tip: the two-state chip, active or not, is the only visual you need; colour and weight handle the rest without a separate selected badge.