# Bubble: Reactions

> `<BubbleReactions />` overlaps the bubble edge and reserves its own space, so the next row needs no extra gap. Give a static row `role="img"` and a label, or use buttons for interactive reactions.

Example: https://hextaui.com/docs/bubble/examples/reactions
Component docs: https://hextaui.com/docs/bubble.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/bubble-reactions.json
```

This adds `components/examples/bubble/reactions.tsx` with the Bubble component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/bubble/reactions.tsx"
"use client"

import * as React from "react"
import {
  IconFlame,
  IconHeart,
  IconMoodSmile,
  IconThumbUp,
} from "@tabler/icons-react"

import { Bubble, BubbleContent, BubbleReactions } from "@/components/ui/bubble"
import { Button } from "@/components/ui/button"

function ReactionToggle({
  label,
  icon,
  initial = false,
}: {
  label: string
  icon: React.ReactNode
  initial?: boolean
}) {
  const [pressed, setPressed] = React.useState(initial)

  return (
    <Button
      aria-label={label}
      aria-pressed={pressed}
      variant={pressed ? "default" : "secondary"}
      size="icon-xs"
      onClick={() => setPressed(!pressed)}
    >
      {icon}
    </Button>
  )
}

export function BubbleReactionsDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <Bubble variant="secondary">
        <BubbleContent>Shipped the new onboarding flow.</BubbleContent>
        <BubbleReactions
          role="img"
          aria-label="Reactions: thumbs up, fire, and 8 more"
        >
          <span>👍</span>
          <span>🔥</span>
          <span>+8</span>
        </BubbleReactions>
      </Bubble>
      <Bubble align="end">
        <BubbleContent>Reactions can anchor to the top.</BubbleContent>
        <BubbleReactions side="top" align="start" role="img" aria-label="Heart">
          <span>❤️</span>
        </BubbleReactions>
      </Bubble>
      <Bubble variant="secondary">
        <BubbleContent>ok</BubbleContent>
        <BubbleReactions
          role="img"
          aria-label="Reactions: party, eyes, rocket, check"
        >
          <span>🎉</span>
          <span>👀</span>
          <span>🚀</span>
          <span>✅</span>
        </BubbleReactions>
      </Bubble>
      <Bubble variant="outline">
        <BubbleContent>Interactive reactions use buttons.</BubbleContent>
        <BubbleReactions align="start">
          <ReactionToggle label="Thumbs up" icon={<IconThumbUp />} initial />
          <ReactionToggle label="Heart" icon={<IconHeart />} />
          <ReactionToggle label="Fire" icon={<IconFlame />} />
          <ReactionToggle label="Add reaction" icon={<IconMoodSmile />} />
        </BubbleReactions>
      </Bubble>
    </div>
  )
}
```

## Props in this example

### Bubble

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "secondary" \| "muted" \| "tinted" \| "outline" \| "ghost" \| "destructive"` | `"default"` |  |
| `align` | `"start" \| "end"` | `"start"` |  |

### BubbleReactions

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `side` | `"top" \| "bottom"` | `"bottom"` |  |
| `align` | `"start" \| "end"` | `"end"` |  |

## More Bubble examples

- [Variants](https://hextaui.com/docs/bubble/examples/variants.md)
- [Alignment](https://hextaui.com/docs/bubble/examples/alignment.md)
- [Group](https://hextaui.com/docs/bubble/examples/group.md)
- [Shapes](https://hextaui.com/docs/bubble/examples/shapes.md)
- [Tail](https://hextaui.com/docs/bubble/examples/tail.md)
- [Show more](https://hextaui.com/docs/bubble/examples/show-more.md)
- [Tooltip](https://hextaui.com/docs/bubble/examples/tooltip.md)
- [Popover](https://hextaui.com/docs/bubble/examples/popover.md)
- [Long content](https://hextaui.com/docs/bubble/examples/long-content.md)
- [Nested reply](https://hextaui.com/docs/bubble/examples/nested.md)
- [Right to left](https://hextaui.com/docs/bubble/examples/rtl.md)