Bubble

Use Bubble inside a conversation to establish alignment, tone, and a readable content surface. Choose a semantic variant for the message state instead of adding page-specific colour classes.

Composition

Use BubbleContent for text or an interactive child, and BubbleReactions for lightweight message actions. BubbleGroup keeps adjacent bubbles at a consistent rhythm.

Accessibility

Alignment and colour cannot carry authorship or state alone. Pair bubbles with MessageHeader when the speaker is not obvious, and give reaction buttons accessible names and pressed state.

Best practices

• Use one alignment consistently for each participant.
• Reserve destructive for a message that communicates a real failure.
• Keep long-form content in the ghost variant when a bubble surface would reduce readability.