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.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
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.