Bubble

Use the Variant parameter to pick one of seven surfaces: Default (strong primary, typically outgoing), Secondary and Muted (neutral incoming surfaces), Tinted (primary-tinted), Outline (bordered), Ghost (unframed and full-width, ideal for assistant markdown output), and Destructive (errors).

Use the Align parameter to position bubbles within the conversation column. BubbleAlign.Start (the default) keeps incoming messages on the left, while BubbleAlign.End shifts outgoing messages to the right.

Place BubbleReactions inside a bubble to anchor an emoji reaction row to its edge. Side chooses the top or bottom edge (default Bottom) and Align chooses the horizontal position along that edge (default End). Give decorative emoji rows role="img" and a descriptive aria-label.

Set AsChild="BubbleContentElement.Button" on BubbleContent to render a native button and wire @onclick for quick-reply choices. Setting Href alone renders an anchor automatically — no AsChild needed. Interactive bubbles receive hover and focus-visible styling out of the box.

Wrap consecutive bubbles from the same sender in a BubbleGroup to cluster them with tight, consistent spacing. End-aligned bubbles keep their alignment inside the group, so incoming and outgoing runs can each be grouped independently.