The tests pass. Shall I open a pull request?
MessageBubble
One message: your own on the end side in the accent colour, others on the start side. Shows author, time, a typing mark and delivery state with retry.
- MessageBubble
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, MessageBubble
Yes, with a short description.
Sent
A long line without spaces wraps inside the bubble: https://github.com/skribly/ui/pull/128/files#diff-0123456789abcdef
Not sent
Claude Code is writing
Dark theme, MessageBubble
The tests pass. Shall I open a pull request?
Yes, with a short description.
Sent
A long line without spaces wraps inside the bubble: https://github.com/skribly/ui/pull/128/files#diff-0123456789abcdef
Not sent
Claude Code is writing
High contrast theme, MessageBubble
The tests pass. Shall I open a pull request?
Yes, with a short description.
Sent
A long line without spaces wraps inside the bubble: https://github.com/skribly/ui/pull/128/files#diff-0123456789abcdef
Not sent
Claude Code is writing
UsageLink to the section Usage
import { MessageBubble } from '@skribly/ui/conversation'<MessageBubble from="me" author="You" hideAuthor time="2026-11-08T14:02" timeLabel="14:02" status={{ tone: 'danger', label: 'Not sent' }} onRetry={retry} retryLabel="Try again">
Ship it?
</MessageBubble>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Each message is an article named by its author and time, even when the author is hidden on screen.
- A failed send is read out at once with its word; other states are shown with an icon and a word.
- The typing mark is read as its required pendingLabel, its dots stop pulsing under reduced motion and stay visible in Windows high contrast.
- Action buttons stay visible for touch and keyboard.
This demo runs through axe in all three themes on every test run. See what the tests check.