An animated emoji reaction button with count display and toggle state for social interactions.
Import the EmojiReactionButton component and access all parts using dot notation.
import {EmojiReactionButton} from "@heroui-pro/react";
<EmojiReactionButton>
<EmojiReactionButton.Emoji />
<EmojiReactionButton.Count />
</EmojiReactionButton>.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.emoji-reaction-button__emoji - The emoji character.emoji-reaction-button__count - The reaction count[data-selected="true"] on root (accent border and background tint; count text turns accent):hover or [data-hovered="true"] (background change):focus-visible or [data-focus-visible="true"] (focus ring):active or [data-pressed="true"] (scale down)[data-readonly="true"] on root (default cursor, no press scale, no pointer interaction):disabled or [aria-disabled="true"] (reduced opacity)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.
The emoji character display.
Also supports all native span HTML attributes.
The reaction count display.
Also supports all native span HTML attributes.