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

Simple reaction

<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:

Active vs inactive

<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:

Zero count reaction

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

With User List

Provide a list of users for screen reader context:

Reaction with user attribution

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

With Livewire Integration

Livewire toggle example

<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>

Props

Prop	Type	Default	Description
`emoji`	`string`	`null`	The emoji character to display
`count`	`int`	`0`	Number of reactions
`active`	`bool`	`false`	Whether the current user has reacted
`users`	`array`	`[]`	List of user names (for screen readers)

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

Key	Action
`Tab`	Move focus to the button
`Enter` / `Space`	Activate the button

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

Token	Used for
`--font-wk-sans`	Button font family
`--font-wk-heading-weight`	Count weight
`--text-wk-sm`	Count font size
`--color-wk-text-muted`	Inactive count text
`--color-wk-accent` / `--color-wk-accent-content`	Active border + count text
`--color-wk-bg` / `--color-wk-bg-elevated` / `--color-wk-bg-muted`	Background per active / hover state
`--color-wk-border`	Inactive border
`--border-wk-width`	Border width
`--radius-wk-full`	Pill border radius
`--transition-wk-duration` / `--transition-wk-easing`	Hover / toggle transition