Reaction

An emoji reaction button for chat messages, comments, and social interactions. Supports active/inactive toggle state, count display, and screen-reader-friendly user lists.

Basic Usage

<x-wirekit::row gap="sm">
    <x-wirekit::reaction emoji="👍" :count="5" />
    <x-wirekit::reaction emoji="❤️" :count="3" />
    <x-wirekit::reaction emoji="🎉" :count="1" />
</x-wirekit::row>

Active State

Highlight a reaction the current user has selected:

<x-wirekit::row gap="sm">
    <x-wirekit::reaction emoji="👍" :count="5" :active="true" />
    <x-wirekit::reaction emoji="❤️" :count="3" :active="false" />
    <x-wirekit::reaction emoji="🎉" :count="7" :active="true" />
</x-wirekit::row>

Zero Count (Hidden)

When count is zero, only the emoji is shown:

<x-wirekit::reaction emoji="➕" :count="0" />

With User List

Provide a list of users for screen reader context:

<x-wirekit::reaction emoji="👍" :count="3" :users="['Alice', 'Bob', 'Charlie']" />

With Livewire Integration

<x-wirekit::row gap="sm">
    <x-wirekit::reaction emoji="👍" :count="12" :active="true" wire:click="toggleReaction('thumbs-up')" />
    <x-wirekit::reaction emoji="😂" :count="4" :active="false" wire:click="toggleReaction('laugh')" />
</x-wirekit::row>

Optimistic UI

Pass the name of the Livewire method this component should call and the change appears immediately, then confirms or undoes itself when the server answers:

<x-wirekit::reaction
    emoji="👍"
    :count="$count"
    :active="$reacted"
    optimistic="react"
/>

Load wirekit-optimistic.js alongside whichever bundle you already use — it is a separate file so applications that do not use it pay nothing for it:

@wirekitScripts
<script src="{{ asset('vendor/wirekit/wirekit-optimistic.js') }}"></script>

Try it

The demo below runs the real path: the change shows immediately, the outline says it is provisional, and the server's answer either confirms it silently or takes it back.

{{-- In your app there is no host: your own Livewire component owns the method. --}}
<x-wirekit::reaction
    emoji="👍"
    :count="$count"
    :active="$reacted"
    optimistic="react"
/>

The <livewire:demos.…> wrapper above exists only on this site — it supplies the demo methods so the page can show a real round trip. The block under it is what you write.

Only one thing is state here: whether you reacted. The count is derived from it, so a rollback puts both back together and they cannot end up disagreeing — a button that says you reacted next to a total that does not include you.

The accessible name is built in the browser for the same reason. Built on the server it would name the count the server saw, so an optimistic change would show six and announce five.

What a screen reader hears is the same for every component that supports this, and it is written out in full — one hedged announcement at the change, silence on confirmation, one more only if the server refuses, and focus that never moves — in Optimistic UI — the announcement contract. That page is also where the boundary is stated: this covers mutations, not sorting, filtering or pagination.

Props

Accessibility

• <button type="button"> for keyboard activation
• aria-pressed="true|false" reflects active state
• aria-label combines emoji with reaction count (e.g. "👍, 5 people reacted")
• When users is provided, a sr-only span with aria-describedby lists all names

Keyboard Interaction

Pitfalls

• Don't bind wire:click.live on every reaction button. Each click round-trips to the server with full component state. The component's :on-react callback prop debounces; use it.

Design Tokens