# Bubble

> Chat message bubbles with variants and reactions.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/bubble.json`

## Install

```tsx
import { Bubble, BubbleContent, BubbleReactions, BubbleGroup } from "@aspyn-io/kit";
```

### Conversation

Align start for incoming messages and end for the current user; group consecutive bubbles.

```tsx
<BubbleGroup>
  <Bubble variant="secondary">
    <BubbleContent>Hey! Want to see chat bubbles?</BubbleContent>
  </Bubble>
  <Bubble align="end">
    <BubbleContent>Sure — hit me with your best demo.</BubbleContent>
  </Bubble>
</BubbleGroup>
```

### Variants

```tsx
<Bubble variant="default | secondary | muted | tinted | outline | ghost | destructive">
  <BubbleContent>…</BubbleContent>
</Bubble>
```

### Reactions

BubbleReactions anchors an emoji/quick-action row to the bubble edge.

```tsx
<Bubble align="end">
  <BubbleContent>Tests passed on the first try. All 142 of them.</BubbleContent>
  <BubbleReactions aria-label="Reactions: party, clap">
    <span>🎉</span>
    <span>👏</span>
  </BubbleReactions>
</Bubble>
```

## Notes

- Bubble is just the message surface. For full chat rows with avatars, names, and timestamps, wrap bubbles in Message.
- Make a bubble interactive by passing asChild/render to BubbleContent (renders a button or anchor) — the accessible name comes from the bubble text.
- Reactions are decorative emoji: give BubbleReactions role="img" + aria-label so a screen reader announces the row once.