Bubble

PreviewCopy Anchor Link

UsageCopy Anchor Link

import {
  Bubble,
  BubbleContent,
  BubbleGroup,
  BubbleReactions,
} from '@vitnode/core/components/ui/bubble'

<Bubble>
  <BubbleContent>I removed the stale route. You are welcome.</BubbleContent>
</Bubble>

A bubble shrinks to fit its text and never grows past 80% of the row. New bubbles grow in from their tail corner; with reduced motion they only fade.

VariantsCopy Anchor Link

default is usually the current user, secondary the standard reply. ghost drops the frame and takes the full width.

AlignmentCopy Anchor Link

Your messages go on the end side, everyone else's on the start.

<Bubble align="end">
  <BubbleContent>Sent by me.</BubbleContent>
</Bubble>

GroupingCopy Anchor Link

BubbleGroup tightens the spacing between consecutive bubbles from one sender. Set align on each Bubble, not on the group.

<BubbleGroup>
  <Bubble variant="muted">
    <BubbleContent>First thought.</BubbleContent>
  </Bubble>
  <Bubble variant="muted">
    <BubbleContent>Second thought, arriving fashionably late.</BubbleContent>
  </Bubble>
</BubbleGroup>

ReactionsCopy Anchor Link

BubbleReactions pins a pill to the bubble's edge. It overlaps the bubble, so leave extra gap between rows.

<BubbleReactions aria-label="Reactions: rocket, eyes" role="img" side="top">
  <span>🚀</span>
  <span>👀</span>
</BubbleReactions>

Links and buttonsCopy Anchor Link

Use render on BubbleContent to make a bubble a real link or button, like a quick-reply suggestion.

<Bubble variant="outline">
  <BubbleContent render={<button onClick={onPick} type="button" />}>
    Show me the plugin docs
  </BubbleContent>
</Bubble>

Use with MessageCopy Anchor Link

For an avatar, sender name or read receipt, wrap bubbles in a Message. Bubbles inside follow the message's align.

AccessibilityCopy Anchor Link

• Bubble is only the visual surface. Put role="log" and an aria-label on the conversation container.
• Give BubbleReactions role="img" and an aria-label, so screen readers announce it once instead of reading every emoji. Interactive reactions should be labelled buttons.
• Clickable bubbles must be a real <button> or <a> via render.
• Variants signal tone with color, so keep the meaning in the text too.

PropsCopy Anchor Link

BubbleCopy Anchor Link

BubbleContentCopy Anchor Link

BubbleReactionsCopy Anchor Link

API ReferenceCopy Anchor Link

Base UI - useRender