Skip to content
TrademarkTrademark
Docs
Modules

Social

Updated: October 21, 2026
View on GitHub
Soon
Not released yet. The published package does not include this yet, so it will not install today.

Reactions are the smallest way to answer a post, so they should feel good to leave. Every reaction moves in its own way: a heart beats, a thumbs-up nods, a laugh shakes, fire flickers. Picking one plays its gesture, sends a few copies flying out of the chip and rolls the count up.

Reactions

A chip for each reaction in use, with how many people left it, and an add button that opens every option. Tap a chip to add your reaction or take it back. One reaction per person by default.

Counts that keep up

counts includes the viewer's own reaction, as value has it. When the viewer picks another one, the numbers move at once, before your server answers; when new counts arrive, they take over, and the viewer is never counted twice. So you can send the change and refetch, without keeping an optimistic copy of the counts yourself.

Several per person

multiple lets a person leave several reactions, as in chat. value is then a list.

Effects

effect="burst" (the default) sends six small copies out of the chip, float lifts one larger copy up and away, and none keeps only the gesture.

Your own reactions

A reaction can be an image instead of an emoji: give it src, such as an uploaded animated WebP or GIF. It plays as it is, so set motion="none" when the image already moves, or pick a gesture for a still one. An emoji can take a different gesture too.

Store the value with each reaction, not the image, so an app can change a reaction's picture later. A counted value that options no longer lists still shows, as plain text, so no one's reaction disappears when the set changes. For an animated set that matches the emoji, Google's Noto Animated Emoji (CC BY 4.0) works as src, as above. To draw a reaction any other way, such as with Lottie, pass renderGlyph.

Reaction

One reaction on its own, with its gesture. It plays once each time the pointer arrives (trigger="hover"), every few seconds (loop), or when playKey changes (manual).

The gestures are beat, nod, shake, pop, droop, flicker, spin, wave and bounce. Known emoji get a fitting one (reactionMotion tells you which); anything else bounces.

Accessibility

The row is a group named "Reactions". Each chip is a toggle button named for its reaction and count ("Love, 12") with aria-pressed for the viewer's own. The add button opens a group of toggle buttons that the arrow keys move through; Escape closes it and gives focus back. With reduced motion nothing moves: the gestures, the burst and the rolling count are all off, and the reactions still change at once.

API reference

Type
Default
optionsrequired
The reactions people can pick: value, label, emoji or src, motion.
ReactionOption[]—
counts
People per reaction, by value, including the viewer's own.
Record<string, number>—
value
The viewer's reaction: a value or null, or a list with multiple.
nullstringstring[]
—
defaultValue
The starting value when uncontrolled.
nullstringstring[]
—
onValueChange
Called with the next value and { option, selected }.
(value: ReactionValue, change: ReactionChange) => void—
multiple
Several reactions per person.
booleanfalse
showAll
A chip for every option, even at zero.
booleanfalse
picker
The add button that opens every option.
booleantrue
open
boolean—
defaultOpen
booleanfalse
onOpenChange
(open: boolean) => void—
effect
burst, float or none.
burstfloatnone
burst
size
s, m or l.
sml
m
disabled
booleanfalse
renderGlyph
Draw a reaction yourself, such as with Lottie.
(option: ReactionOption) => ReactNode—
addLabel
The add button's name.
stringAdd reaction
ariaLabel
The group's name.
stringReactions
…and every FlexProps propinherited—
Type
Default
valuerequired
What the reaction is stored as; the emoji drawn when there is no emoji or src.
string—
label
What screen readers hear.
string—
emoji
The emoji to draw.
string—
src
An image instead, such as an animated WebP.
string—
motion
beat, nod, shake, pop, droop, flicker, spin, wave, bounce or none.
nonepopbeatnodshakedroopflickerspinwavebounce
—
size
s, m, l or xl.
smlxl
m
trigger
hover, loop or manual.
hoverloopmanual
hover
playKey
Change it to play the gesture again.
numberstring
—
decorative
Hidden from screen readers when a control already names it.
booleanfalse
children
React.ReactNode—
Edit this page on GitHub