Home
Previous componentNext component

Reactions

Open in fibo's StorybookOpen in FigmaOpen on 21st.dev

Reactions let people respond to content with an emoji in one tap. They sit under a message or post as a row of pills, or float in a corner of the page.

TB
Tori Bryan12:45 PM

Just shipped the reactions component. Picking one turns a click into a small celebration, which is the whole point.

ReactionsTap a pill to add or take back yours, or the smiley to pick another.

Examples

Inline

The default: pills under the content, with the add button at the end.

With reactionsTap one to add yours. It tints, pops and throws a burst of its emoji.
Picker openIt opens above the button, or below when there's no room.
No reactions yetOnly the add button shows.
Busy postCounts past a thousand shorten to 1.2K, so the pills stay small.
Without countsJust the emoji, for places where numbers invite comparison.

Floating

A bar pinned to a corner of the page, for reacting to the page as a whole, such as the end of an article. It shows the total beside the add button, and the burst rises from the bar.

Designing for one tap

A reaction should cost less than a reply. One tap, a small burst of joy, and back to reading. The bar keeps to its corner as the page scrolls, ready whenever the reader is.

9 reactions
FloatingPinned to this frame's corner here. On a page it pins to the window's.

Under a message

The usual home: a row under each message in a thread.

TB
Tori Bryan12:45 PM

Just shipped the reactions component. Picking one turns a click into a small celebration, which is the whole point.

Tap a pill, or the smiley to add another.

Saved to your data

The row can report every change so your app saves it, and anything else on the page can read the same numbers.

9 reactions across 3 kinds

The line below updates as you react.

Anatomy

The row is a pill per reaction, each an emoji and a count, then an add button. Your own reactions are tinted.

  1. Pill
  2. Emoji
  3. Your reaction
  4. Add button
  5. Count
The rowThree reactions, one of them yours.

The add button opens a picker of six common reactions, plus any already on the item. The ones you've picked are tinted here too.

  1. Choice
  2. Already yours
  3. Picker
  4. Open add button
The pickerHeld open over its row.

Guidelines

  • 01Put the row right under the message, comment or post it responds to.
  • 02Use the floating bar for a reaction to the whole page, such as the end of an article. One per page.
  • 03Offer five or six choices at most. More turns a quick tap into a decision.
  • 04Leave the choices at their six defaults unless your product has its own vocabulary. Anything already on the item is added to them.
  • 05A reaction nobody holds any more disappears instead of lingering as a zero.
  • 06Hide the counts where numbers would turn reactions into a contest.
  • 07Counts past a thousand shorten to 1.2K, so a busy post keeps its pills small. They shorten in English unless you pass locale, so the server and the browser render the same text.

Best practices

TB
Tori Bryan12:45 PM

Just shipped the reactions component. Picking one turns a click into a small celebration, which is the whole point.

DoKeep reactions right under the content they respond to.
TB
Tori Bryan12:45 PM

Just shipped the reactions component. Picking one turns a click into a small celebration, which is the whole point.

Don'tDon't put them above the content. People react after they read.
DoKeep the set small, so each reaction means something.
Don'tDon't let every emoji become a pill. A wall of reactions reads as noise.

Accessibility

Every pill and the add button is a regular button, so the row works from the keyboard in tab order.

KeyDoes
TabDoesMoves between the pills and the add button
Space or ↵DoesAdds or takes back a reaction, or opens the picker
←→DoesMoves through the choices in the picker
Home or EndDoesJumps to the first or last choice
EscDoesCloses the picker and puts focus back on the add button
  • 01Each pill is a toggle button named by the reaction's label and count, such as "Heart, 3 reactions", with aria-pressed for whether you've reacted. The emoji itself is hidden from screen readers.
  • 02A polite live region announces each change: "Added Heart", "Removed Heart". On the floating bar, with counts on, it adds the new total: "Added Heart, 13 reactions in total".
  • 03With showCounts off, pills are named by their label alone, so screen readers hear what sighted users see.
  • 04Choices you've already picked show as pressed in the picker too.
  • 05Arrow keys, Home and End move through the choices. Escape closes the picker and returns focus to its trigger; tabbing away closes it too.
  • 06Particles and pill motion switch off under prefers-reduced-motion.
  • 07Override triggerLabel and panelLabel when your product speaks another language.

References