Bubble

The text container of a chat message, in seven variants, with optional reactions.

default

secondary

muted

tinted

outline

ghost

destructive

Shipped. 🎉

👍 3

Usage

import { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from "@zynactra/ui/bubble"

<Bubble variant="muted" align="start">
  <BubbleContent>Shipped.</BubbleContent>
  <BubbleReactions>👍 3</BubbleReactions>
</Bubble>

Variants: default, secondary, muted, tinted, outline, ghost, destructive. align is start or end. BubbleReactions takes side (top, bottom) and align.

Guidelines

Two variants per conversation: one for "me", one for everyone else. The rest are for special cases (destructive for a failed send, tinted for a system note).
Never brand on a bubble. Chat is content, not an action.
Long content (code, tables) goes in a ghost bubble at full width.

Usage

Guidelines

On this page