## Reaction Burst (S—047)

Emoji reaction chips with a picker; reacting bursts a few copies of the emoji and rolls the count.

- URL: https://sundaeui.dev/components/reaction-burst
- Category: UI components · Art direction: Playful
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/reaction-burst.json`
- Tags: chat, emoji, social, animated, feedback, reactions

Existing reactions sit as chips with rolling counts. The smiley button opens a picker that springs up one emoji at a time.
Your own reactions are highlighted and toggle off when pressed again.

### Usage

```tsx
import { ReactionBurst } from '@/components/sundae/reaction-burst'

<ReactionBurst
  options={[{ emoji: '🎉', label: 'Party' }, { emoji: '🔥', label: 'Fire' }]}
  initial={[{ emoji: '🎉', label: 'Party', count: 12 }]}
/>
```

### Props

- `options` (`{ emoji; label }[]`, required): Picker emoji with screen-reader names.
- `initial` (`Reaction[]`, default `[]`): Starting reactions and counts.
- `size` (`number`, default `22`): Emoji size, px.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Comments, messages, changelogs and posts.

### When not to use

- Formal feedback where a rating or text answer is needed.

### Accessibility

- Chips are toggle buttons named by emoji label and count ("Party, 12").
- The picker is a menu opened by a button with aria-expanded; Escape closes it.
- Reduced motion removes the burst and the roll.

### Keyboard

- Enter / Space: React or remove your reaction
- Escape: Close the picker