---
title: "Reaction Pill"
description: "A toggleable emoji reaction pill, plus the group that rows them under a message."
---

A toggleable emoji reaction pill, plus the group that rows them under a message. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of Reaction Pill — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add reaction
```

npm dependencies: class-variance-authority.

Files written — React: components/ui/reaction.tsx. Vue: components/ui/reaction/Reaction.vue, components/ui/reaction/ReactionGroup.vue, components/ui/reaction/index.ts.

## Usage

React:

```tsx
import { Reaction } from "@/components/ui/reaction"
```

Vue:

```ts
import { Reaction, ReactionGroup } from "@/components/ui/reaction"
```

## API reference

**`Reaction`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `emoji` | `React.ReactNode` | — | Emoji or icon rendered on the left. |
| `count` | `number` | — | Number of users who reacted. |
| `active` | `boolean \| undefined` | — | Controlled active state. |
| `defaultActive` | `boolean \| undefined` | — | Initial active state when uncontrolled. |
| `onActiveChange` | `(active: boolean) => void \| undefined` | — | Called with the next active state when toggled. |

The registry exports `Reaction`, `ReactionGroup`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

The reaction is a real button and publishes its toggled state through `aria-pressed`. Keep the emoji name and count understandable to screen readers.

## Tokens

Reaction Pill reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.