Emoji Reaction

A reaction bar for a post: a row of pill buttons, each holding an emoji and a count, plus an optional popover of extra emojis. The count is an odometer — it rolls up or down in the direction of the change — and selecting a reaction pops the emoji and throws a small burst of particles out of it.

The component is fully controlled and mutates nothing. It renders the reactions array you hand it and emits react; you own the array, the counts and the reacted flags. Nothing is persisted for you and no default state is inferred.

That contract shows up most clearly in the picker. A picked emoji that already exists in the bar toggles that reaction, so the exclusivity rule still applies; one that does not exist is reported as new — and the payload for that case is the emoji string itself, used as an id.

Usage

Hold the reactions in a ref and rewrite it in the react handler. Because the component emits exclusivity for you, the handler can simply clear every other flag whenever any reaction is turned on. The one case that needs more than a toggle is a picked emoji that is not in the bar yet — it arrives under the emoji string, so the handler appends it as a new reaction.

<template>
  <div class="flex w-full max-w-lg flex-col gap-4">
    <div class="rounded-2xl border p-4">
      <p class="text-sm font-medium">
        Ship the new onboarding flow?
      </p>
      <div class="mt-3">
        <MEmojiReaction
          :reactions="reactions"
          show-picker
          @react="onReact"
        />
      </div>
    </div>

    <p class="text-xs text-muted">
      One reaction at a time — {{ reactedLabel }}
    </p>
  </div>
</template>

<script setup lang="ts">
type Reaction = {
  count: number
  emoji: string
  id: string
  label: string
  reacted: boolean
}

const reactions = ref<Reaction[]>([
  { count: 12, emoji: '👍', id: 'thumbs-up', label: 'Thumbs up', reacted: false },
  { count: 4, emoji: '🎉', id: 'party-popper', label: 'Party popper', reacted: false },
  { count: 9, emoji: '🚀', id: 'rocket', label: 'Rocket', reacted: true },
])

const reactedLabel = computed(() => {
  const active = reactions.value.find(item => item.reacted)
  return active ? active.label : 'nothing selected yet'
})

function onReact(id: string, reacted: boolean) {
  const existing = reactions.value.find(item => item.id === id)

  // A picked emoji that is not in the bar yet arrives as its own emoji string,
  // so add it as a new reaction (and clear the others, per the exclusivity rule).
  if (!existing) {
    if (!reacted) return
    reactions.value = [
      ...reactions.value.map(item => ({ ...item, reacted: false })),
      { count: 1, emoji: id, id, label: id, reacted: true },
    ]
    return
  }

  reactions.value = reactions.value.map((item) => {
    if (item.id === id) {
      return {
        ...item,
        count: Math.max(0, item.count + (reacted ? 1 : -1)),
        reacted,
      }
    }
    return { ...item, reacted: false }
  })
}
</script>

Customize

What react reports

One event, five situations. In every case the component emits and waits — it never changes reactions itself.

Props

Events

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.emojiReaction in app.config.ts.

Accessibility

The bar is a role="group" labelled "Reactions". Each pill is a real <button> carrying aria-pressed and an aria-label of the form "Party popper, 4 reactions" — singular when the count is 1, so the label tracks your count rather than being a static string.

The picker is a proper menu. The trigger has aria-haspopup="menu", aria-expanded, and aria-controls pointing at a useId()-generated id on the menu; the menu itself is role="menu" with role="menuitem" children and a roving tabindex. Keyboard: ArrowUp or ArrowDown on the trigger opens it and moves focus to the first item, arrows move and wrap within the menu, Escape closes and returns focus to the trigger, and Tab closes without stealing focus back. A pointer press outside closes it too. Hover also opens the picker, but only on devices that report (hover: hover) and (pointer: fine), and hovering never moves focus.

Reduced motion is honoured throughout: the press-scale, the emoji pop, the particle burst, the menu scale-in and the digit roll all swap to opacity-only or drop out entirely under prefers-reduced-motion.

Performance

• Burst particles come from a seeded linear congruential generator, not Math.random(), so a given seed always throws the same shape — the effect is reproducible and free of a global RNG call.
• The burst layer is unmounted on a 550ms timer, not on the ring's animation completing. motion-v re-runs animateUpdates on every re-render and resolves immediately when the target has not changed, so an onAnimationComplete unmount would tear the burst down before it was ever painted.
• The emoji pop is animated imperatively on the element that already exists, rather than by remounting it behind a changing key.
• Counters use AnimatePresence with mode="popLayout" and a fixed 1.15em overflow window, so a rolling number never widens the pill.
• The two document listeners (pointerdown, keydown) are added when the picker opens and removed when it closes or the component unmounts — they are not permanent.
• Nothing animates a layout property; the press, pop, burst and roll are all transform and opacity.