ChatBubble
Message bubble for chat and messaging UIs with avatar, name, and timestamp support
Category: display · WCAG 2.2-AA · chat, message, conversation, messaging
Variants
- start
- end
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Content rendered inside the component. |
side | 'start' | 'end' | start | Which side of the thread the bubble sits on: `start` for an incoming message (avatar first), `end` for an outgoing one (right-aligned, avatar last). |
avatar | React.ReactNode | — | Avatar element shown beside the message. |
name | string | — | Display name of the message sender. |
time | string | — | Timestamp text shown with the message. |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-color-surface--cascivo-color-text--cascivo-color-text-muted--cascivo-color-text-subtle--cascivo-color-accent--cascivo-color-accent-content--cascivo-radius-overlay--cascivo-radius-indicator
When to use
- 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
- General content cards without a conversational context — use Card
- Inline comments that do not need a bubble visual treatment
How to build an accessible ChatBubble in React →
Examples
Incoming message
Message from another user, aligned to the start
<ChatBubble side="start" name="Alice" time="10:42 AM">Hey, how are you?</ChatBubble>Outgoing message
Current user message, aligned to the end with accent background
<ChatBubble side="end" time="10:43 AM">Doing great, thanks!</ChatBubble>With avatar
Message with an avatar beside the bubble
<ChatBubble side="start" avatar={<Avatar src="/alice.png" size="sm" />} name="Alice">See you tomorrow!</ChatBubble>