Emoji Reaction Button
An animated emoji reaction button with count display and toggle state for social interactions.
Usage
Anatomy
Import the EmojiReactionButton component and access all parts using dot notation.
import {EmojiReactionButton} from "@heroui-pro/react";
<EmojiReactionButton>
<EmojiReactionButton.Emoji />
<EmojiReactionButton.Count />
</EmojiReactionButton>Disabled
Read-only
Sizes
CSS Classes
Base & Size Classes
.emoji-reaction-button- Base toggle button with rounded-full shape.emoji-reaction-button--sm- Small size.emoji-reaction-button--md- Medium size (default).emoji-reaction-button--lg- Large size
Element Classes
.emoji-reaction-button__emoji- The emoji character.emoji-reaction-button__count- The reaction count
Interactive States
- Selected:
[data-selected="true"]on root (accent border and background tint; count text turns accent) - Hover:
:hoveror[data-hovered="true"](background change) - Focus visible:
:focus-visibleor[data-focus-visible="true"](focus ring) - Pressed:
:activeor[data-pressed="true"](scale down) - Read-only:
[data-readonly="true"]on root (default cursor, no press scale, no pointer interaction) - Disabled:
:disabledor[aria-disabled="true"](reduced opacity)
API Reference
EmojiReactionButton
The root component. Wraps RAC ToggleButton.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
isSelected | boolean | - | Whether the button is selected (controlled) |
defaultSelected | boolean | - | Default selected state (uncontrolled) |
onChange | (isSelected: boolean) => void | - | Handler called when the selected state changes |
isReadOnly | boolean | - | Whether the button is read-only and should not respond to user interaction |
isDisabled | boolean | - | Whether the button is disabled |
children | ReactNode | ((renderProps) => ReactNode) | - | Emoji and Count elements |
Also supports all RAC ToggleButton props.
EmojiReactionButton.Emoji
The emoji character display.
Also supports all native span HTML attributes.
EmojiReactionButton.Count
The reaction count display.
Also supports all native span HTML attributes.