How to build an accessible ChatBubble in React
Pure layout component with role="none". Wrap a list of ChatBubble elements in an element with role="log" and aria-live="polite" to announce new messages to screen readers.
When to use a ChatBubble
- Chat UIs and messaging features showing conversation history
- Comment threads with a bubble-style layout
- Customer support widgets displaying agent and user messages
When not to use it
- General content cards without a conversational context — use Card
- Inline comments that do not need a bubble visual treatment
Accessibility
Role none, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Using ChatBubble for notification cards or feed items
Prefer: <Card> or <Alert> for non-conversational content
ChatBubble implies a back-and-forth conversation; use Card for standalone content pieces
Example
<ChatBubble side="start" name="Alice" time="10:42 AM">Hey, how are you?</ChatBubble>