Bubble
Displays conversational content in a message bubble.
+1
The Bubble component displays framed conversational content. Use it for chat text, short structured output, suggestions, and reactions. For full message rows with avatars or metadata, compose it inside Message.
Installation
Usage
<Bubble variant=Muted>
<Bubble.Content>
{"I checked the registry output and removed the stale route."->React.string}
</Bubble.Content>
<Bubble.Reactions>
<span> {"+1"->React.string} </span>
</Bubble.Reactions>
</Bubble>Composition
Bubble
├── Bubble.Content
└── Bubble.ReactionsUse Bubble.Group to group consecutive bubbles from the same sender.
Features
- Seven visual variants, from strong primary content to unframed ghost content
- Start and end alignment for sender and receiver bubbles
- Reactions that anchor to the bubble edge
- Bubbles size to their content, up to the style-defined max width
- Custom styling through
classNameon every part
Examples
Variants
Use variant to change the visual treatment of the bubble.
Group
Use Bubble.Group to stack consecutive bubbles from the same sender.
Reactions
Use Bubble.Reactions for reaction summaries or quick action buttons.
+1reviewed
Accessibility
When reactions are plain emoji, group them with role="img" and an ariaLabel so assistive technology announces the reaction summary once. When reactions are interactive, render buttons with icon labels.