Bubble Component

Overview

Bubble animates sent messages from the composer into the conversation, reveals incoming text word by word, and shows typing feedback while a reply is prepared. Users can react with an emoji picker, double-click for a heart, or swipe a bubble to reply, while reaction counts roll and long messages collapse until expanded.

Use it wherever messaging is central to the product, such as team collaboration, support, AI assistants, and community platforms. Animation should clarify who said what and whether it succeeded, without getting in the way of reading.

Theme and Interaction Customisation

Incoming, outgoing, and error states stay visually distinct, joined corners group consecutive messages, and collapsible content keeps long messages compact. Entrances, text streaming, fly-from-input, reaction pops, rolling counts, emoji magnification, hover lift, press feedback, and error shake can each be switched on independently.

Example Production Use Case

A project management platform can use Bubble for client conversations inside the workspace. A sent message flies from the composer, shows a sending state, and updates once delivery is confirmed.

An AI assistant can pair the typing indicator with streamed, word-by-word replies, then offer suggested follow-ups once the answer is complete.

A community app can lean on reactions and swipe-to-reply, letting members respond to a specific message with a quick gesture on mobile.

Best Used For

• Team collaboration platforms and project discussions.
• Customer support conversations with delivery feedback.
• AI assistant applications with streamed responses.
• Project management tools with task-linked messaging.
• Community platforms with expressive reactions.
• Internal business messaging between teams.
• Conversational onboarding and guided follow-ups.
• Mobile messaging with swipe replies and compact layouts.

Not For

For a single status update or confirmation, Toast is a better fit than a conversation.

Don’t replace structured forms with chat when users need to enter several validated fields.

Avoid decorative chat with no real conversation behind it, since fake typing or delivery states mislead users. High-stakes actions like payments or permissions need explicit confirmation, not just messages.

Performance Budget

Keep entrances and reactions light, use stable message IDs, and virtualise or incrementally load long histories. Stream text and update counts without re-rendering the whole thread, avoid repeated layout measurement, and never pull users away from earlier messages they are reading.

Accessibility and Mobile

Give messages a clear reading order, identifiable senders, and text for delivery and error states, not just alignment or colour. Reactions, replies, and expand controls must be keyboard-operable, and swipe-to-reply needs a conventional alternative. On mobile, keep the composer visible above the keyboard and stop swipes from fighting vertical scroll, and with reduced motion simplify flying messages, streaming, and reaction animations.

Common Mistakes

• Treating an animated outgoing bubble as confirmed delivery.
• Showing typing or delivery states that don’t reflect real events.
• Letting word-by-word reveals slow down reading.
• Attaching reactions or counts to the wrong message.
• Offering swipe as the only way to reply.
• Letting text selection trigger reply gestures.
• Auto-scrolling while users read earlier messages.
• Enabling the reaction picker without onReact, or rolling counts without count data.
• Overanimating frequent conversation updates.
• Ignoring reduced-motion preferences.