Emoji Reaction Button
An animated emoji reaction button with count display and toggle state for social interactions.
Usage
Disabled
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) - 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 |
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.