# EmojiReactionButton

> Reaction chip: an emoji with its count, pressed when the current user reacted.

Source: https://ui.jcsoftdev.com/docs/components/emoji-reaction-button

Reaction chip: an emoji with its count, pressed when the current user reacted.

## Import

```ts
import { EmojiReactionButton } from "@jcsoftdev/ui/forms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/forms/emoji-reaction-button`.

## Usage

```tsx
<EmojiReactionButton emoji="🔥" count={7} reacted={false} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `emoji` * | `string` |  |  |
| `count` * | `number` |  |  |
| `reacted` | `boolean` | `false` | Whether the current user has used this reaction. |
| `onToggle` | `((reacted: boolean) => void)` |  |  |
| `disabled` | `boolean` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/forms-emojireactionbutton--default)
- [Reacted](/storybook/?path=/story/forms-emojireactionbutton--reacted)
- [With Picker](/storybook/?path=/story/forms-emojireactionbutton--with-picker)
- [Narrow](/storybook/?path=/story/forms-emojireactionbutton--narrow)
- [Brutal Preset](/storybook/?path=/story/forms-emojireactionbutton--brutal-preset)

## Source

`packages/ui/src/forms/emoji-reaction-button/emoji-reaction-button.tsx`