Bubble

Displays conversational content in a message bubble — variants, alignment, grouping, reactions, and polymorphic link/button content.

Default

A short thread with grouped messages and reactions.

Installation

CLI
npx @sonojs/ui@latest add bubble

Usage

bubble.tsx
import {
  Bubble,
  BubbleContent,
  BubbleGroup,
  BubbleReactions,
} from "@/components/ui/bubble"

export function Example() {
  return (
    <BubbleGroup>
      <Bubble>
        <BubbleContent>
          I checked the registry output and removed the stale route.
        </BubbleContent>
        <BubbleReactions>
          <span>👍</span>
        </BubbleReactions>
      </Bubble>
    </BubbleGroup>
  )
}

Props

PropTypeDefaultDescription
variant"default" · "secondary" · "muted" · "tinted" · "outline" · "ghost" · "destructive""default"Visual treatment of the bubble surface.
align"start" · "end""start"Align the bubble to the start or end of the conversation row.
side"top" · "bottom""bottom"On BubbleReactions: which edge to anchor to.
asChildbooleanfalseOn BubbleContent: merge props onto a child (link or button).